Свойство position в CSS
Версия для печатиСвойства позиционирования CSS позволяют расположить элементы так, как вам это нужно. Вы можете расположить элемент позади другого, и указать то, что должно происходить, если содержимое элемента слишком велико.
Элементы могут быть позиционированы с помощью свойств top, bottom, left и right. Однако эти свойства не работают без назначенного свойства position. Они также работают по-разному в зависимости от указанного свойства position в CSS.
Существует четыре способа позиционирования элементов.
Статическое позиционирование
По умолчанию все HTML элементы имеют статическое позиционирование.
.element_static {
position: static;
}
На элементы с таким позиционированием свойства top, bottom, left и right никак не влияют.
Фиксированное позиционирование
Элементы с фиксированным позиционированием располагаются относительно окна браузера.
Они остаются на своих местах даже при скроллинге окна:
p.element_fixed {
position: fixed;
top: 30px;
right: 5px;
}
Замечание: IE7 и IE8 поддерживают фиксированное позиционирование только при указанном !DOCTYPE.
Элементы с таким позиционированием выбиваются из основного потока элементов. Документ и другие элементы ведут себя так, как будто элементов с фиксированным позиционированием не существует.
Элементы со свойством position = fixed могут перекрывать другие элементы.
Относительное позиционирование
Элементы с относительным позиционированием располагаются относительно своей нормальной (статичной) позиции в документе:
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
Содержимое элемента с position = relative может быть перемещено и перекрыто другими элементами, но место, зарезервированное за этим элементом, будет оставаться в основном потоке документа:
h2.pos_top {
position: relative;
top: -50px;
}
Элементы с относительным позиционированием часто используются как контейнеры для абсолютно позиционированных элементов.
Абсолютное позиционирование
Элемент с абсолютным позиционированием располагается относительно своего первого родителя с позиционированием отличным от статичного. Если такого родителя не будет найдено, то относительно элемента <html>:
h2 {
position: absolute;
left: 100px;
top: 150px;
}
Документ и другие элементы ведут себя так, как будто элементов с абсолютным позиционированием не существует.
Элементы со свойством position = absolute могут перекрывать другие элементы.
Перекрываемые элементы
Когда элементы имеют позиционирование, отличное от статичного, они могут перекрывать друг друга.
Свойство z-index определяет порядок перекрытия элементов (какой элемент должен быть помещен впереди остальных, какой сзади и т.д.).
Элемент может иметь как положительное, так и отрицательное значение свойства z-index:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Элемент с бОльшим значением z-index всегда располагается над элементом с меньшим значением.
Замечание: если два элемента перекрываются и у них не указано свойство z-index, то элемент, находящийся дальше в HTML коде, располагается выше.