Справочник CSS

inset: короткая запись координат

inset — краткая запись для четырёх координат позиционированного элемента. Она работает по тому же порядку значений, что margin: верх, горизонталь, низ или все стороны.

Рабочий пример

.overlay {
  position: absolute;
  inset: 0;
}
.badge {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
}

inset: 0 растягивает абсолютный слой до всех краёв содержащего блока. Логические свойства учитывают направление письма и удобны для многоязычных интерфейсов.

Когда применять

Применяй inset для оверлеев, фоновых ссылок и позиционирования значков. У родителя должен быть подходящий контекст позиционирования, обычно position: relative.

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

Частые ошибки

• Забывать position у самого элемента
• Не создавать содержащий блок у родителя
• Перекрывать оверлеем интерактивные элементы