Позиционирование элементов

Свойство position определяет тип позиционирования элемента.

Всего существует пять значений для определения типа позиционирования:

• static
• relative
• fixed
• absolute
• sticky

Затем для элементов определяют позицию при помощи свойств top, bottom, left и right. При этом, следует помнить, что эти свойства не будут работать, пока сначала не будет установлено свойство position. Кроме этого, они работают по разному в зависимости от типа позиционирования элемента.

position: static;

HTML элемент имеет статическую позицию. Это значение по умолчанию.

На элементы со статическим позиционированием не действуют свойства top, bottom, left и right.

Элемент со значением position: static; не позиционируется каким-то особенным способом. У него всегда позиция, соответствующая обычному потоку вывода элементов на странице:

Вот CSS код, использованный для этого элемента:

div.static {
  position: static;
  border: 3px solid #73AD21;
}

position: relative;

Элемент со значением position: relative; позиционируется относительно к своей обычной позиции.

Установка свойств top, bottom, left и right определяет сдвиг элемента с относительным позиционированием от его обычной позиции. При этом, остальной контент не будет заполнять образовавшийся разрыв.

Вот CSS код, использованный для этого элемента:

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

position: fixed;

Элемент со значением position: fixed; позиционируется относительно окна просмотра. Это означает, что он всегда будет оставаться (зафиксирован) на одном и том же месте, даже если страница будет прокручиваться. Для определения позиции элемента используются свойства top, bottom, left и right.

Зафиксированный элемент не оставляет никаких разрывов в том месте, где должен располагаться в обычных условиях.

Обратите внимание на зафиксированный элемент внизу страницы. Вот CSS код, использованный для этого элемента:

div.fixed {
  position: fixed;
  bottom: 0;
  right: 30%;
  width: 300px;
  border: 3px solid #73AD21;
}

position: absolute;

Элемент со значением position: absolute; имеет абсолютную позицию относительно ближайшего родительского элемента (вместо позиционирования относительно окна просмотра, как в случае с зафиксированным элементом).

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

Элемент с абсолютным позиционированием выводится из нормального потока отображения и может перекрывать другие элементы.

Вот простой пример:

Вот использованный CSS код:

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

position: sticky;

Элемент со значением position: sticky; позиционируется в зависимости от пользовательского положения прокрутки веб-страницы.

Такой элемент переключается между значениями relative и fixed в зависимости от положения прокрутки веб-страницы. До тех пор, пока позиция элемента при прокрутке не достигнет края окна просмотра, у элемента будет значение relative, затем элемент "прилипает" на месте (как при значении position:fixed).

Внимание! Internet Explorer не поддерживает "липкое" позиционирование. Для Safari нужно добавлять префикс -webkit- (см. пример ниже). Также, чтобы значение sticky сработало, необходимо определить по крайней мере одно из свойств top, bottom, left или right.

В следующем примере элемент будет прилипать к верхнему краю страницы (top: 0), когда прокрутка достигнет его позиции:

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

CSS свойства определения позиции