Position в CSS

Скачать PDF

Введение

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

Значения свойства position

static

Это значение по умолчанию. Элемент следует нормальному потоку документа. Свойства top, right, bottom, left и z-index не применяются.

.element {
  position: static;
}

relative

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

.element {
  position: relative;
  top: 10px;
  left: 20px;
}

absolute

Элемент удаляется из нормального потока документа и позиционируется относительно ближайшего позиционированного предка (не static).

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

fixed

Элемент удаляется из нормального потока документа и позиционируется относительно окна просмотра (viewport).

.header {
  position: fixed;
  top: 0;
  width: 100%;
}

sticky

Гибридное позиционирование между relative и fixed. Элемент ведет себя как relative до тех пор, пока не достигнет определенного порога прокрутки, после чего ведет себя как fixed.

.nav {
  position: sticky;
  top: 0;
}

Свойства позиционирования

• top: Расстояние от верхнего края контейнера
• right: Расстояние от правого края контейнера
• bottom: Расстояние от нижнего края контейнера
• left: Расстояние от левого края контейнера
• z-index: Определяет порядок наложения элементов

Примеры использования

Центрирование элемента

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Фиксированная навигация

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  z-index: 1000;
}

Липкий заголовок

.section-header {
  position: sticky;
  top: 0;
  background-color: white;
  padding: 10px;
  z-index: 10;
}

Практические советы

1. Всегда указывайте хотя бы одно из свойств top, right, bottom или left при использовании position: absolute или position: fixed.
2. Для position: absolute убедитесь, что родительский элемент имеет position отличное от static.
3. Используйте z-index для управления порядком наложения элементов.
4. Помните, что position: fixed может вести себя иначе на мобильных устройствах из-за виртуальной клавиатуры и других факторов.
5. position: sticky требует указания порога (например, top: 0), чтобы работать правильно.