Макет
Утилиты для управления расположением элемента в 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 позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:absolute
, чтобы применять утилиту absolute
только при hover.
<div class="relative hover:absolute">
<!-- ... -->
</div>
Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.
Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:absolute
, чтобы применить утилиту absolute
только на экранах среднего размера и выше.
<div class="relative md:absolute">
<!-- ... -->
</div>
Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.