7. Позиционирование

CSS: Позиционирование

Иллюстрация к уроку Позиционирование в CSS — это мощный инструмент для точного управления размещением элементов на веб-странице. Свойство position определяет, как элемент позиционируется в документе, а связанные с ним свойства (top, right, bottom, left) позволяют смещать его от заданного места.

`position: static`

Это значение по умолчанию для всех HTML-элементов. Элементы с position: static размещаются в обычном потоке документа, как и должны. Свойства top, right, bottom, left и z-index не оказывают на них никакого влияния.

.static-element {
  position: static; /* Поведение по умолчанию */
  background-color: lightgrey;
  padding: 10px;
  margin: 10px;
}

`position: relative`

Элемент с position: relative позиционируется относительно своего обычного положения в потоке документа. Свойства top, right, bottom, left смещают элемент от этого обычного положения. Важно: пространство, которое элемент занимал в обычном потоке, остается пустым. relative также создает новый контекст позиционирования для дочерних абсолютно позиционированных элементов.

.relative-box {
  position: relative;
  top: 20px;   /* Сместить на 20px вниз от обычного места */
  left: 30px;  /* Сместить на 30px вправо от обычного места */
  background-color: lightblue;
  width: 150px;
  height: 50px;
  z-index: 1; /* Может использоваться для наслоения */
}

`position: absolute`

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

.parent-relative {
  position: relative; /* Этот предок является точкой отсчета */
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
  margin: 50px;
}

.child-absolute {
  position: absolute;
  top: 20px;    /* 20px от верхнего края родителя */
  right: 10px;  /* 10px от правого края родителя */
  background-color: coral;
  width: 100px;
  height: 50px;
  z-index: 2;
}

`position: fixed`

Элемент с position: fixed позиционируется относительно окна просмотра (viewport). Он также удаляется из обычного потока документа. Такие элементы остаются на одном и том же месте на экране, даже при прокрутке страницы.

.fixed-header {
  position: fixed;
  top: 0;      /* Прикрепить к самому верху окна просмотра */
  left: 0;     /* Прикрепить к самому левому краю окна просмотра */
  width: 100%;
  background-color: darkgreen;
  color: white;
  padding: 15px;
  text-align: center;
  z-index: 100; /* Гарантирует, что элемент будет поверх других */
}

`position: sticky`

position: sticky — это гибрид relative и fixed. Элемент ведет себя как relative до тех пор, пока пользователь не прокрутит страницу до определенной точки, после чего он “прилипает” и ведет себя как fixed. Требует указания хотя бы одного свойства смещения (top, right, bottom, left).

.sticky-sidebar {
  position: sticky;
  top: 10px; /* Прилипнет, когда до верхнего края viewport останется 10px */
  align-self: flex-start; /* Для Flexbox, чтобы предотвратить растягивание */
  background-color: lightgoldenrodyellow;
  padding: 15px;
  border: 1px solid goldenrod;
  margin-top: 20px;
  /* Для работы sticky необходим прокручиваемый контейнер */
}
/* Пример HTML-структуры для sticky:
<div style="height: 1000px; overflow-y: scroll;">
  <div class="sticky-sidebar">Важная информация</div>
  <div>Много контента для прокрутки...</div>
</div>
*/

Свойства смещения (`top`, `right`, `bottom`, `left`)

Эти свойства используются в сочетании с position (кроме static) для точного определения места элемента.

top: смещение от верхнего края.
right: смещение от правого края.
bottom: смещение от нижнего края.
left: смещение от левого края. Значения могут быть в пикселях, процентах, em, rem и т.д.

`z-index`

Свойство z-index управляет порядком наложения позиционированных элементов. Элементы с большим значением z-index отображаются поверх элементов с меньшим значением. Работает только с позиционированными элементами (relative, absolute, fixed, sticky).

.box-a {
  position: absolute;
  top: 0; left: 0;
  width: 100px; height: 100px;
  background-color: blue;
  z-index: 1; /* Будет под box-b */
}

.box-b {
  position: absolute;
  top: 20px; left: 20px;
  width: 100px; height: 100px;
  background-color: red;
  z-index: 2; /* Будет поверх box-a */
}

Типичные ошибки

Забывать position: relative для родителя: При использовании position: absolute для дочернего элемента, его родитель должен иметь position: relative (или другое не-static значение), иначе дочерний элемент будет позиционироваться относительно <body>.
z-index не работает: z-index действует только на позиционированные элементы. Если элемент не имеет position кроме static, z-index игнорируется.
Недостаточный контент для sticky: Для работы position: sticky должен быть достаточный объем контента для прокрутки, чтобы элемент мог “прилипнуть”.

🎯 Практика

Создайте навигационное меню, которое всегда остается вверху экрана при прокрутке (position: fixed). Ниже него разместите блок контента, внутри которого будет карточка с изображением, которая смещена на 20px вниз и 20px вправо от своего обычного места (position: relative).

💡 Совет

Используйте position: absolute и position: relative с осторожностью. Чрезмерное использование может привести к сложностям в адаптивной верстке и перекрытию элементов. Для большинства задач компоновки предпочтительнее использовать Flexbox или CSS Grid. Позиционирование лучше всего подходит для точечного размещения отдельных элементов или создания слоев (например, всплывающих подсказок, модальных окон).

7. Позиционирование

CSS: Позиционирование

position: static

position: relative

position: absolute

position: fixed

position: sticky

Свойства смещения (top, right, bottom, left)

z-index