Позиционирование — inset, inset-block-start и компания

Когда мы привычно прижимаем элемент к краю контейнера, мы пишем top, right, bottom, left. У всех четырёх есть логические эквиваленты — и есть короткий универсальный шорткат inset.

Шорткат inset

Самая частая запись — растянуть элемент по всем четырём сторонам контейнера:

.overlay {
  position: fixed;
  inset: 0;
}

Это эквивалент top: 0; right: 0; bottom: 0; left: 0. У inset такая же логика записи как у margin/padding: одно значение — ко всем четырём сторонам, два — вертикаль/горизонталь, четыре — верх/право/низ/лево.

.overlay      { inset: 0; }                    /* все стороны = 0 */
.banner       { inset: 12px 0; }                /* block: 12px, inline: 0 */
.notification { inset: 16px 24px 8px 16px; }    /* TRBL */

Парные шорткаты inset-block и inset-inline

Если нужно прижать только по одной оси:

.banner {
  position: sticky;
  inset-block-start: 60px;  /* отступ от начала блока — обычно сверху */
  inset-inline: 0;           /* растянуть на всю ширину строки */
}

Каждый из inset-block и inset-inline принимает одно или два значения. inset-block: 20px — и block-start, и block-end равны 20 px. inset-block: 0 auto — прибить к началу блока, у конца оставить авто.

Сводная таблица логического позиционирования

Практический пример: тултип

Тултип, который появляется «у конца» элемента-якоря: справа в LTR, слева в RTL — без отдельного CSS под арабский интерфейс.

.tooltip {
  inset-inline-start: 100%;        /* начало тултипа = конец якоря */
  inset-block-start: 0;
  margin-inline-start: 8px;
  inline-size: max-content;
  padding-inline: 10px;
  padding-block: 6px;
}

В LTR-контейнере тултип появится справа от якоря. Если тот же блок попадёт в dir="rtl", тултип сам разместится слева — потому что «конец строки» в RTL слева. Один и тот же CSS, два зеркальных результата.

С физическим left: 100%; margin-left: 8px для RTL-режима пришлось бы держать отдельный набор правил — и помнить, что они существуют. Логические свойства закрывают это автоматически.