Макет
Утилиты для управления расположением элемента в DOM.
Используйте static
для позиционирования элемента в соответствии с обычным потоком документа.
Любые смещения будут игнорироваться, и элемент не будет действовать как ссылка на позицию для абсолютно позиционированных дочерних элементов.
Статический родитель
Абсолютный ребенок
<div class="static ...">
<p>Статический родитель</p>
<div class="absolute bottom-0 left-0 ...">
<p>Абсолютный ребенок</p>
</div>
</div>
Используйте relative
, чтобы позиционировать элемент в соответствии с нормальным потоком документа.
Любые смещения рассчитываются относительно нормального положения элемента, и элемент будет действовать как ссылка на положение для абсолютно позиционированных дочерних элементов.
Относительный родитель
Абсолютный ребенок
<div class="relative ...">
<p>Относительный родитель</p>
<div class="absolute bottom-0 left-0 ...">
<p>Абсолютный ребенок</p>
</div>
</div>
Используйте absolute
для позиционирования элемента вне обычного потока документа, заставляя соседние элементы действовать так, как будто этот элемент не существует.
Любые смещения рассчитываются относительно ближайшего родителя, который имеет позицию, отличную от static
, и элемент будет действовать как ссылка на позицию для других абсолютно позиционированных дочерних элементов.
Со статическим позиционированием
Относительный родитель
Статический родитель
Статический ребенок
Статический брат
С абсолютным позиционированием
Относительный родитель
Статический родитель
Абсолютный ребенок
Статический брат
<div class="static ...">
<!-- Статический родитель -->
<div class="static ..."><p>Статический ребенок</p></div>
<div class="inline-block ..."><p>Статический брат</p></div>
<!-- Статический родитель -->
<div class="absolute ..."><p>Абсолютный ребенок</p></div>
<div class="inline-block ..."><p>Статический брат</p></div>
</div>
Используйте fixed
для позиционирования элемента относительно окна браузера.
Любые смещения рассчитываются относительно окна просмотра, и элемент будет действовать как ссылка на позицию для абсолютно позиционированных дочерних элементов.
<div class="relative">
<div class="fixed top-0 left-0 right-0">Конаткты</div>
<div>
<div>
<img src="..." />
<strong>Andrew Alfred</strong>
</div>
<div>
<img src="..." />
<strong>Debra Houston</strong>
</div>
<!-- ... -->
</div>
</div>
Используйте sticky
, чтобы позиционировать элемент как relative
до тех пор, пока он не пересечет указанный порог, а затем рассматривать его как фиксированный, пока его родительский элемент не выйдет за пределы экрана.
Любые смещения рассчитываются относительно нормального положения элемента, и элемент будет действовать как ссылка на положение для абсолютно позиционированных дочерних элементов.
<div>
<div>
<div class="sticky top-0 ...">A</div>
<div>
<div>
<img src="..." />
<strong>Andrew Alfred</strong>
</div>
<div>
<img src="..." />
<strong>Aisha Houston</strong>
</div>
<!-- ... -->
</div>
</div>
<div>
<div class="sticky top-0">B</div>
<div>
<div>
<img src="..." />
<strong>Bob Alfred</strong>
</div>
<!-- ... -->
</div>
</div>
<!-- ... -->
</div>
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:absolute
to only apply the absolute
utility on hover.
<div class="relative hover:absolute">
<!-- ... -->
</div>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:absolute
to apply the absolute
utility at only medium screen sizes and above.
<div class="relative md:absolute">
<!-- ... -->
</div>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.