Позиция

​Основы использования

​Статическое позиционирование элементов

Используйте утилиту 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, чтобы расположить элемент относительно окна браузера.

Любые смещения рассчитываются относительно окна просмотра, и элемент будет действовать как ссылка на позицию для абсолютно позиционированных дочерних элементов.

Contacts

Andrew Alfred

Debra Houston

Jane White

Ray Flint

Mindy Albrect

David Arnold

<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, пока он не пересечет указанный порог, а затем считать его fixed, пока его родительский элемент не исчезнет с экрана.

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

A

Andrew Alfred

Aisha Houston

Anna White

Andy Flint

B

Bob Alfred

Bianca Houston

Brianna White

Bert Flint

C

Colton Alfred

Cynthia Houston

Cheyenne White

Charlie Flint

<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>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.