Свойство position в CSS

Свойства позиционирования CSS позволяют расположить элементы так, как вам это нужно. Вы можете расположить элемент позади другого, и указать то, что должно происходить, если содержимое элемента слишком велико.

Элементы могут быть позиционированы с помощью свойств top, bottom, left и right. Однако эти свойства не работают без назначенного свойства position. Они также работают по-разному в зависимости от указанного свойства position в CSS [5].

Существует четыре способа позиционирования элементов.

Статическое позиционирование

По умолчанию все 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 коде, располагается выше.