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

Вариации позиционирования

div {
  /* Управление позиционированием */
  position: static* | relative | absolute | fixed | sticky;

  /* ось z - Чем больше это значение, тем выше отображается элемент по условной оси z */
  z-index: 1;

  /* Координаты позиционирования */
  top: 5px | 5% | auto;
  left: 5px | 5% | auto;
  right: 10px | 10% | auto;
  bottom: 15px | 15% | auto;

  /* будет влиять на позиционирование */
  margin-left: 5px; 
}

• static - статичное позиционирование. Элемент всегда по умолчанию в потоке. На свойства top, left, right, bottom не реагирует;
• relative - относительное позиционирование. Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента от первоначального расположения, при этом другие элементы думают, что элемент стоит всё ещё на том же месте как в потоке при position: static. Относительные блоки без смещения ведут себя как обычные.
• absolute - абсолютное позиционирование. Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента нет. Так, если у родителя значение position установлено как static или родителя нет, то отсчёт координат ведётся от края окна браузера. Если у родителя значение position задано как relative, то отсчёт координат ведётся от края родительского элемента. Ecли у абс. спозиционированного элемента явно не задана ширина, то он будет расстягиваться по заданным координатам.
• fixed - Фиксированное позиционирование. По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
• sticky - Похож на fixed, только при скролле страницы элемент будет fixed только внутри своего род. контейнера. Дальше он проскроллится вместе с другим контентом.

---

Центровка по высоте и ширине с помощью position

• В род. контейнере должно быть достаточно свободного пространства по высоте и ширине;
• У доч. элемента должна быть строго фиксирована ширина и высота;

div {
  height: 60px;
  width: 60px;

  /* абс. с 50% */
  position: absolute;
  top: 50%;
  left: 50%;

  /* половина от ширины */
  margin-top: -30px;
  margin-left: -30px;
}

---

Псевдоэлементы

::before и ::after создаёт псевдоэлемент, который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства content. По умолчания является инлайновым.

Их также можно использовать, чтобы не добавлять лишний html-код только для решения вопросов дизайна и стилизации.

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

div {
  position: relative;
  z-index: 1;
  width: 300px;
  height: 300px;

  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    width: 50px;
    height: 50px;
    background-color: maroon;
  }

  &::before {
    top: 10px;
    left: 10px;
  }

  &::after {
    bottom: 10px;
    right: 10px;
  }
}

---

Слой-маска

div {
  position: relative;
  z-index: 1;
  width: 300px;
  height: 300px;

  // слой будет лежать полностью поверх родителя
  &::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
  }
}

---

z-index

За порядок наложения элементов отвечает свойство z-index. Если два элемента накладываются друг на друга, то сверху отобразится элемент с более высоким индексом. Чтобы навести порядок в наложении элементов, используйте следующие правила:

1. 0000–1999: основной контент,
2. 2000–2999: выпадающие списки,
3. 3000–3999: навигация,
4. 4000–4999: шапка и подвал,
5. 5000–7999: другое,
6. 8000–8999: модальные окна,
7. 9000–9999: уведомления.

---

inset

Шорткат для координат.

div {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

div {
  inset: 0;
}