Позиционирование CSS в Tailwind: absolute, inset, z-index

position:absolute → absolute. Стороны → top/right/bottom/left. Свой z-index → arbitrary.

Позиционирование переносится по понятным правилам: position:absolute даёт absolute, а каждое смещение получает свою утилиту стороны. Значения z-index вне шкалы записываются произвольно. Настоящие сложности в другом — в sticky, контексте наложения и обрезанном overflow, поэтому такие блоки полезно проверить прямо в браузере.

position и offsets

position:absolute → absolute; top/right/bottom/left → inset-* или top-*, если совпадает со шкалой.

z-index

Обычные z-index → z-10 / z-50. Редкие брендовые → z-[…].

Sticky и stacking

sticky + overflow у предков — классическая ловушка: проверьте stacking context после конвертации.

Попробовать

Открыть конвертер

.example { display: flex; gap: 1rem; padding: 1rem; }

Заметка о доверии: проверяйте результат визуально. Конвертер — черновик для разработчиков.