С чего начать вёрстку ХТМЛ‑страницы

С чего начать вёрстку

Дробление страницы
Абсолютное позиционирование

С чего начать вёрстку

Дробление страницы
Абсолютное позиционирование

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

Абсолютное позиционирование элементов включается свойством position: absolute. Главное, что нужно помнить, — абсолютное позиционирование вырывает элемент из потока и он начинает существовать сам по себе.

Это очень удобно для позиционирования независимых элементов, которые не должны влиять на своих соседей. Примеров применения очень много: крестик «закрыть» в попапе; сам попап; различные декоративные элементы; стрелки прокрутки поверх картинок в фотораме.

Конечно, нет никакого смысла вырывать элемент из потока просто так, не привязывая ни к чему. Для управления привязкой элемента с абсолютным позиционированием используется position: relative у родительского элемента. Ближайший родитель с position: relative станет для элемента с абсолютным позиционированием собственной локальной системой координат. Все отступы будут считаться от границ такого родительского элемента. Назовём его якорным элементом.

Размещая якорные элементы на нужных уровнях иерархии ДОМ‑дерева, мы можем управлять положением и ограничивать «поле деятельности» абсолютно спозиционированных элементов. Аналогичным образом работают и элементы с position: absolute внутри родителей с position: absolute.

Помимо свойств margin и padding, у элементов с абсолютным позиционированием появляется ещё один способ управлять положением и размерами — с помощью свойств top, right, bottom и left.

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

<div class="outer">
  <div class="blue"></div>
  <div class="red"></div>
  <div class="green"></div>
  <div class="black"></div>
</div>

.outer {
  position: relative;
  width: 100%;
  height: 200px;
  border: 1px solid #f00;
}
.blue {
  position: absolute;
  top: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  background-color: #00f;
  border-radius: 20px;
}
.red {
  position: absolute;
  top: 40px;
  left: 10px;
  right: -10px;
  height: 40px;
  background-color: #f00;
  border-radius: 20px;
}
.green {
  position: absolute;
  top: 80px;
  bottom: 0;
  right: 50%;
  width: 40px;
  background-color: #0f0;
  border-radius: 20px;
}
.black {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: #000;
  border-radius: 20px;
}

Попробуйте поиграть с отступами и размерами элементов в примере на Кодпене

Пара классических трюков с абсолютным позиционированием

Поставить по центру элемент с заранее известными размерами:

<div class="parent">
  <div class="centered-stuff"></div>
</div>

.parent {
  position: relative;
  width: 100%;
  height: 200px;
  border: 1px solid #f00;
}
.centered-stuff {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 40px;
  margin: auto;
  background-color: #00f;
}

Поставить по центру элемент с неизвестными размерами, например, кнопку:

<div class="parent">
  <button>Кнопка</button>
</div>

.parent {
  position: relative;
  width: 100%;
  height: 200px;
  border: 1px solid #fff1a5;
}
button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.