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

Выводим элемент из потока, привязываем к углу родителя и управляем тем, что лежит поверх.

absolute вырывает элемент из обычного потока и позиционирует относительно ближайшего relative-родителя.

relative и absolute в паре

Главный приём: на родителя вешаем relative, на ребёнка — absolute и координаты. Тогда ребёнок отсчитывает позицию от родителя, а не от всей страницы.

<div class="relative">
  <img src="product.jpg" alt="">
  <span class="absolute top-2 right-2 bg-red-500 text-white px-2 rounded">
    -30%
  </span>
</div>

Красная плашка со скидкой «прилипнет» к правому верхнему углу картинки. Без relative на родителе она бы привязалась к углу всего окна.

Координаты: top, right, bottom, left и inset

Положение задают top-*, right-*, bottom-*, left-* (значения из шкалы интервалов). inset-0 — сокращение «все четыре по нулю», то есть растянуть элемент на весь родитель:

<div class="relative">
  <div class="absolute inset-0 bg-black/40">Затемнение поверх</div>
</div>

Полупрозрачная чёрная подложка накроет весь родительский блок целиком — типичный приём для затемнения картинки под текстом.

z-index — порядок наложения

Когда элементы перекрываются, z-* решает, кто выше. Чем больше число, тем ближе к зрителю: z-0, z-10, z-20, z-50.

<header class="sticky top-0 z-50 bg-white">Шапка поверх всего</header>

Высокий z-50 гарантирует, что прилипающая шапка останется над прокручиваемым контентом и не «уедет» под него.

sticky и fixed

Помимо absolute полезны ещё два режима: fixed закрепляет элемент относительно окна (он не двигается при прокрутке — годится для кнопок-FAB), а sticky приклеивает элемент к краю при прокрутке (как «липкая» шапка выше). Обычно sticky top-0 — это всё, что нужно для прилипающего хедера.

Итог

Пара relative (родитель) + absolute (ребёнок) привязывает элемент к углу родителя.
top/right/bottom/left-* задают координаты, inset-0 растягивает на весь родитель.
z-* управляет наложением; sticky top-0 z-50 — рецепт липкой шапки поверх контента.