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

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

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

  • static
  • relative
  • fixed
  • absolute
  • sticky

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

position: static;

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

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

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

Этот элемент <div> имеет значение position: static;

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


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

position: relative;

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

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

Этот элемент <div> имеет значение position: relative;

Вот 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;
}

Этот элемент <div> имеет значение position: fixed;

position: absolute;

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

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

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

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

Этот элемент <div> имеет значение position: relative;
Этот элемент <div> имеет значение 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 свойства определения позиции

Свойство Описание
bottom Определяет расстояние от нижнего края HTML элемента до нижнего края его родительского элемента
clip Определяет область позиционированного элемента, в которой будет показано его содержимое
left Определяет расстояние от левого края HTML элемента до левого края его родительского элемента, т.е. расстояние его смещения вправо
position Определяет способ позиционирования элемента
right Определяет расстояние от правого края HTML элемента до правого края его родительского элемента
top Определяет расстояние от верхнего края HTML элемента до верхнего края его родительского элемента