Позиционирование может быть сложным!
Решите, какой элемент будет отображаться впереди!
Элементы могут перекрываться!
Позиционирование
Свойства позиционирования CSS позволяют позиционировать элемент. Они также могут разместить элемент за другим, и указать, что должно произойти, когда содержание элемента является слишком большим.
Элементы могут быть расположены с использованием свойств top, bottom, left, и right. Однако, эти свойства не будут работать, до тех пор пока свойство position не указано в первую очередь. Они также работают по-разному в зависимости от метода определения положения.
Существуют четыре различных метода позиционирования.
Статическое позиционирование
HTML-элементы располагаются статически по умолчанию. Статически расположенные элементы всегда располагаются в соответствии с нормальным потоком на странице.
Статически расположенные элементы не зависят от свойств top, bottom, left, и right.
Фиксированное позиционирование
Элемент с фиксированной позицией позиционируется относительно окна браузера.
Он не будет двигаться, даже если окно прокручивается:
Пример 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
p.pos_fixed { position:fixed; top:30px; right:5px; }
</style>
</head>
<body>
<p class="pos_fixed">Некоторый другой текст</p>
<p><b>Примечание:</b> Internet Explorer 7 (и выше) поддерживают значение fixed если указан !DOCTYPE.</p>
<p>Некоторый текст</p><p>Некоторый текст</p><p>Некоторый текст</p>
<p>Некоторый текст</p><p>Некоторый текст</p><p>Некоторый текст</p>
<p>Некоторый текст</p><p>Некоторый текст</p><p>Некоторый текст</p>
<p>Некоторый текст</p><p>Некоторый текст</p><p>Некоторый текст</p>
</body>
</html>
Примечание: Internet Explorer поддерживает значение fixed если указан !DOCTYPE.
Фиксированно расположенные элементы удаляются из нормального потока. Документ и другие элементы ведут себя как будто фиксированно расположенных элементов не существует.
Фиксированно расположенные элементы могут перекрываться другими элементами.
Относительное позиционирование
Относительно расположенный элемент распологается относительно его нормального положения.
Пример 2
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
h2.pos_left { position:relative; left:-20px; }
h2.pos_right { position:relative; left:20px; }
</style>
</head>
<body>
<h2>Этот заголовок без позиционирования</h2>
<h2 class="pos_left">Этот заголовок смещен влево от его нормальной позиции</h2>
<h2 class="pos_right">Этот заголовок смещен вправо от его нормальной позиции</h2>
<p>Относительное позиционирование передвигает элемент ОТНОСИТЕЛЬНО своей первоначальной позиции.</p>
<p>Стиль "left:-20px" вычитает 20 пикселей влево от оригинальной позиции элемента.</p>
<p>Стиль "left:20px" добавляет 20 пикселей слева к оригинальной позиции элемента.</p>
</body>
</html>
Содержание относительно расположенного элемента можно перемещать и перекрывать другие элементы, но зарезервировано место для элементов до сих пор сохраняется в нормальном потоке.
Пример 3
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
h2.pos_top { position:relative; top:-50px; }
</style>
</head>
<body>
<h2>Этот заголовок без позиционирования</h2>
<h2 class="pos_top">Этот заголовок передвинут вверх от своей нормальной позиции</h2>
<p><b>Примечание:</b> Даже если содержание относительно расположенного элемента перемещается, зарезервированное пространство до сих пор сохраняется за элементом в нормальном виде.</p>
</body>
</html>
Относительно расположенные элементы часто используются в качестве контейнера для элементов с абсолютным позиционированием.
Абсолютное позиционирование
Абсолютно-расположенный элемент расположен относительно к первому элементу родителя, который имеет положение, отличное от статического. Если такой элемент не найден, содержащим блоком будет <html>:
Пример 4
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
h2 { position:absolute; left:100px; top:90px; }
</style>
</head>
<body>
<h2>Этот заголовок с абсолютным позиционированием</h2>
<p>С абсолютным позиционированием элемент может быть помещен где угодно на странице. Заголвок ниже размещен 100px слева страницы и 90px сверху страницы.</p>
</body>
</html>
Абсолютно расположены элементы удаляются из нормального потока. Документ и другие элементы ведут себя так, как будто абсолютно позиционируемых элементов не существует.
Абсолютно расположеные элементы могут перекрываться другими элементами.
Перекрытие элементов
Когда элементы расположены вне нормального потока, они могут перекрываться другими элементами.
Свойство z-index указывает порядок стека элемента (элемент должен быть помещен в впереди или позади других элементов).
Элемент может иметь положительный или отрицательный порядок стека:
Пример 5
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
img { position:absolute; left:0px; top:0px; z-index:-1; }
</style>
</head>
<body>
<h1>Это заголовок</h1>
<img src="/images/xhtml-css.png" width="130" height="102" />
<p>Потому-что изображение имеет z-index равный -1, оно будет помещено позади текста.</p>
</body>
</html>
Элемент с большим порядком стека всегда располагается перед элементом с меньшим порядком стека.
Примечание: если два перекрывающихся элемента расположены без указания z-index, элемент расположенный последним в коде HTML будет показан сверху.
Больше примеров
Пример 6
Этот пример показывает, как установить форму элемента. Элемент обрезается в эту форму, и отображается.Пример 7
Этот пример показывает, как установить переполнение элемента для создания прокрутки, когда содержание элемента слишком велико, чтобы поместиться в указанной области.<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
</style>
</head>
<body>
<p>Свойство overflow указывает, что делать, если содержание элемента превышает размер окна элемента.</p>
<p>overflow:scroll</p>
<div class="scroll">Вы можете использовать свойство overflow, когда вы хотите лучше контролировать макет. Значение по умолчанию - visible.</div>
<p>overflow:hidden</p>
<div class="hidden">Вы можете использовать свойство overflow, когда вы хотите лучше контролировать макет. Значение по умолчанию - visible.</div>
</body>
</html>
Пример 8
Этот пример демонстрирует, как настроить браузер для автоматической обработки переполнения.
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow:auto;
}
</style>
</head>
<body>
<p>Свойство overflow указывает, что делать, если содержание элемента превышает данные свойства width и height.</p>
<div>
Вы можете использовать свойство overflow, когда вы хотите лучше контролировать макет. Попробуйте поменять свойство overflow на: visible, hidden, scroll, или inherit и посмотрите что произойдет. Значение по умолчанию - visible.
</div>
</body>
</html>
Пример 9
Этот пример демонстрирует, как изменить курсор.<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
span { display:block; }
</style>
</head>
<body>
<p>Наведите курсор мыши на слова, чтобы изменить курсор.</p>
<span style="cursor:auto">auto</span>
<span style="cursor:crosshair">crosshair</span>
<span style="cursor:default">default</span>
<span style="cursor:e-resize">e-resize</span>
<span style="cursor:help">help</span>
<span style="cursor:move">move</span>
<span style="cursor:n-resize">n-resize</span>
<span style="cursor:ne-resize">ne-resize</span>
<span style="cursor:nw-resize">nw-resize</span>
<span style="cursor:no-drop">no-drop</span>
<span style="cursor:not-allowed">not-allowed</span>
<span style="cursor:pointer">pointer</span>
<span style="cursor:progress">progress</span>
<span style="cursor:row-resize">row-resize</span>
<span style="cursor:col-resize">col-resize</span>
<span style="cursor:s-resize">s-resize</span>
<span style="cursor:se-resize">se-resize</span>
<span style="cursor:sw-resize">sw-resize</span>
<span style="cursor:text">text</span>
<span style="cursor:w-resize">w-resize</span>
<span style="cursor:wait">wait</span>
</body>
</html>
Все свойства позиционирования CSS
Номер в колонке "CSS" указывает, в какой версии CSS свойство определено (CSS1 или CSS2).
| Свойство | Описание | Значения | CSS |
|---|---|---|---|
| bottom | Устанавливает нижний край маржи для позиционированного окна | auto length % inherit |
2 |
| clip | Клип абсолютно позиционируемого элемента | shape auto inherit |
2 |
| cursor | Задает тип курсора, который будет отображаться | url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help |
2 |
| left | Устанавливает левый край маржи позиционированного окна | auto length % inherit |
2 |
| overflow |
Указывает, что произойдет, если содержимое окна переполняет окно элемента | auto hidden scroll visible inherit |
2 |
| position | Указывает тип позиционирования для элементов | absolute fixed relative static inherit |
2 |
| right | Устанавливает правый край маржи позиционированного окна | auto length % inherit |
2 |
| top | Устанавливает верхний край маржи позиционированного окна | auto length % inherit |
2 |
| z-index | Устанавливает порядок стека элемента |
number auto inherit |
2 |
Была ли эта информация полезной?
