position: сдвиг, якорь и значок, улетевший из карточки

У каждого элемента есть свойство position, и по умолчанию оно static: элемент стоит в потоке, а свойства top, right, bottom и left на него не действуют вовсе. Остальные значения — relative, absolute, fixed и sticky — делают элемент позиционированным, и эти четыре свойства начинают работать. Само свойство position — Baseline widely с 29.01.2018.

У relative числа читаются как расстояние от прежнего места: top: 20px — «верхний край на 20 пикселей ниже, чем был», left: 30px — «левый край на 30 правее». Отрицательные числа двигают в обратную сторону. Слово «relative» здесь означает именно «относительно себя прежнего», а не относительно родителя, — и на этом путаются чаще всего.

Три блока высотой 40 стоят стопкой, второму даны position: relative, top: 20px и left: 30px. Прогноз: на каких y и x окажутся три блока? Главный вопрос здесь не про второй блок, а про третий: опустится ли он вслед за сдвинутым соседом?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>static и relative: сдвиг без переезда</title>
  <style>
  .box { height: 40px; }
  .moved { position: relative; top: 20px; left: 30px; }
</style>
</head>
<body>

<div class="box"></div>
<div class="box moved"></div>
<div class="box"></div>
</body>
</html>

measure(".box", "y");
measure(".box", "x");

top: 20px опускает элемент, а не поднимает: это расстояние от верхнего края его прежнего места. Поднять на 20 — top: -20px.

Двигать блоки через relative приходится редко: если нужен просвет, берут margin, и соседи подвинутся следом. Главная работа relative — вовсе без top и left. Такой элемент стоит на своём месте, но уже позиционирован, и это делает его якорем для absolute.

position: absolute вынимает элемент из потока совсем: соседи смыкаются, будто его нет, родитель не учитывает его в своей высоте, а сам элемент встаёт по координатам. Именно так делают значок в углу карточки и тень поверх фотографии. Как устроен нормальный поток, из которого элемент выпадает, разбирает предыдущая статья главы.

От чего считаются координаты? Браузер поднимается от элемента по предкам и берёт первого позиционированного — с любым position, кроме static. Этот предок и становится якорем: top: 0; right: 0 — его правый верхний угол, считая от внутреннего края рамки. Если позиционированных предков нет ни одного, якорем становится сама страница — прямоугольник размером с окно в её начале. Отсюда и уехавший значок: он честно встал в угол, только угол оказался не карточки, а страницы.

Ниже две одинаковые карточки 200 × 50 с отступом сверху 20. В каждой лежит значок 20 × 20 с position: absolute; top: 0; right: 0 — «в правый верхний угол». Отличаются карточки одним: первой, с классом anchor, дано position: relative. Прогноз: на каких y встанут карточки и значки, на каком x — значок первой карточки и какой высоты будут карточки?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>absolute: координаты от якоря</title>
  <style>
  .card { width: 200px; height: 50px; margin-top: 20px; }
  .anchor { position: relative; }
  .badge { position: absolute; top: 0; right: 0; width: 20px; height: 20px; }
</style>
</head>
<body>

<div class="card anchor"><span class="badge"></span></div>
<div class="card"><span class="badge"></span></div>
</body>
</html>

measure(".card", "y");
measure(".badge", "y");
measure(".anchor .badge", "x");
measure(".card", "height");

Значок в примере — <span>, строчный элемент, а на такие ширина с высотой обычно не действуют. Но absolute делает элемент блочным, поэтому размер 20 × 20 сработал. Это побочный эффект, о котором полезно помнить: вытащенный из потока элемент перестаёт вести себя как строчный.

Значок улетел в угол страницы? У предка, от которого он должен считать, нет position. Дайте этому предку position: relative без top и left — сам предок останется на месте.

Координаты можно задать с двух противоположных сторон сразу, и тогда размер элемента определяет якорь: left: 20px; right: 20px растягивает элемент на ширину якоря без 20 пикселей с каждой стороны. Короткая запись inset: 0 ставит все четыре стороны в ноль, и элемент ложится ровно на якорь, как тень поверх фотографии. inset — Baseline widely с 26.10.2023.

В карточке 200 × 100 лежат тень и полоска. Прогноз: какие ширину и высоту окажутся у обеих и на каком y встанет полоска? Здесь работает правило двух противоположных сторон, о котором только что шла речь, — размеры элементов задаёт якорь.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>absolute: координаты от якоря</title>
  <style>
  .card { position: relative; width: 200px; height: 100px; }
  .shade { position: absolute; inset: 0; }
  .strip { position: absolute; left: 20px; right: 20px; bottom: 10px; height: 10px; }
</style>
</head>
<body>

<div class="card">
  <div class="shade"></div>
  <div class="strip"></div>
</div>
</body>
</html>

measure(".shade, .strip", "width");
measure(".shade, .strip", "height");
measure(".strip", "y");

В части II подсказку к кнопке ставит скрипт, и координаты для неё приходится считать самим. Подсказка на absolute без позиционированного предка привязана к странице, поэтому числа для неё берут от начала документа, с учётом прокрутки. Как это делается, разбирает статья о координатах относительно окна и документа.

Когда позиционированные элементы перекрываются, сверху по умолчанию тот, кто позже в разметке: браузер рисует их по порядку, и следующий ложится поверх предыдущего. А все позиционированные рисуются поверх обычных. Поэтому сдвинутый блок из первого раздела лёг на третий, хотя в разметке стоит раньше. Порядок меняет z-index: целое число, и чем оно больше, тем элемент выше. Умолчание — auto: элемент рисуется на уровне ноль, в порядке разметки.

Картинку прибор не видит, поэтому о том, кто сверху, спрашивают отдельно — topAt(x, y): она отвечает текстом элемента, который лежит сверху в точке сцены, x пикселей от её левого края и y от верхнего. Ниже две сцены высотой 40, в каждой блоки A и B шириной 60: A у левого края, B на 30 правее, и с 30 до 60 пикселей они перекрываются. Во второй сцене у A есть z-index: 1. Прогноз: чей текст окажется сверху в точке 45, 20 первой сцены и в точке 45, 60 второй?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>z-index: кто сверху</title>
  <style>
  .scene { position: relative; height: 40px; }
  .a, .b { position: absolute; top: 0; width: 60px; height: 40px; }
  .a { left: 0; }
  .b { left: 30px; }
  .up { z-index: 1; }
</style>
</head>
<body>

<div class="scene"><div class="a">A</div><div class="b">B</div></div>
<div class="scene"><div class="a up">A</div><div class="b">B</div></div>
</body>
</html>

topAt(45, 20);
topAt(45, 60);

Отсюда соблазн: не помог z-index: 10 — поставить 999. Но числа сравниваются не по всей странице. Позиционированный элемент с числом в z-index создаёт контекст наложения: всё его содержимое рисуется вместе с ним, одним слоем, а числа детей решают только, кто сверху внутри этого слоя. Внешний мир видит один слой и сравнивает его с другими по его же числу. В сценах ниже меню с z-index: 999 лежит в левой карточке и выступает на правую, у которой z-index: 2. Отличие одно: в первой сцене у левой карточки есть z-index: 1, во второй — нет. Прогноз: чей текст окажется сверху в точке, где меню заходит на правую карточку, в каждой из сцен?

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>z-index: кто сверху</title>
  <style>
  .scene { position: relative; height: 40px; }
  .card { position: absolute; top: 0; width: 100px; height: 40px; }
  .left { left: 0; }
  .raised { z-index: 1; }
  .right { left: 80px; z-index: 2; }
  .menu { position: absolute; top: 0; left: 40px; width: 100px; height: 40px; z-index: 999; }
</style>
</head>
<body>

<div class="scene">
  <div class="card left raised"><div class="menu">Меню</div></div>
  <div class="card right">Соседка</div>
</div>
<div class="scene">
  <div class="card left"><div class="menu">Меню</div></div>
  <div class="card right">Соседка</div>
</div>
</body>
</html>

topAt(110, 20);
topAt(110, 60);

z-index: 9999 не помогает? Число заперто в слое предка. Найдите предка с z-index, opacity или transform и поднимайте его, а не ребёнка.

Есть слой выше любого числа. Модальное окно, открытое showModal(), браузер кладёт в верхний слой — над всей страницей, какой бы z-index ни стоял у остальных. Окно, показанное атрибутом open, туда не попадает и спорит за место по общим правилам. Чем эти два окна различаются, разбирает первая глава — окно dialog и модальный режим.

position: fixed похож на absolute: элемент выпадает из потока и встаёт по координатам. Но якорь у него не предок, а окно браузера — его видимая часть. Страницу прокручивают, а элемент стоит на месте: так держатся шапка, кнопка «наверх» и окошко чата. Места в потоке у него нет, поэтому начало страницы прячется под фиксированной шапкой, и первому блоку дают отступ сверху на её высоту.

У fixed есть ловушка. Если у кого-то из предков задана трансформация transform или фильтр filter, например размытие, якорем становится этот предок, и «фиксированный» элемент поедет при прокрутке вместе с ним. Трансформации встретятся в статье главы о переходах — и transform, и отдельные свойства translate и scale. Все они перехватывают fixed одинаково, так что эту связь стоит помнить заранее.

position: sticky — гибрид. Пока до элемента не докрутили, он стоит в потоке, как relative. Когда при прокрутке его край доходит до порога, например top: 0, элемент прилипает к краю и держится, пока не кончится его родитель, а дальше родитель уводит его с собой. Так ведут себя заголовки разделов, которые висят сверху, пока читается раздел. Без порога в top или bottom при прокрутке вниз элемент не прилипнет. position: sticky — Baseline widely с 19.03.2022.

Порог отсчитывается от окна, только если выше по дереву нет предка с overflow: auto или overflow: hidden. Первое значение даёт блоку свою полосу прокрутки, второе обрезает всё, что в блок не влезло. С любым из них элемент прилипает внутри этого предка, и если сам предок не прокручивается, прилипания не видно вовсе.

Прибор здесь бессилен: оба режима проявляются только при прокрутке, а рамку примера он не прокручивает. Проверьте на своей странице: длинный текст и заголовок с position: sticky; top: 0 — хватит одного правила.

Привязку к любому элементу страницы, а не только к предку, обещает anchor positioning: подсказка встаёт прямо под кнопкой, где бы та ни стояла. Но это Baseline limited: основные свойства есть во всех основных браузерах лишь с 13.01.2026, а часть значений position-visibility есть только в Safari — не рассчитывайте на неё.

В части II координаты фиксированного элемента и координаты щелчка мыши окажутся в одной системе — от угла окна, и пересчитывать между ними ничего не придётся. Об этом — статья о событиях мыши и координатах clientX.