Краткая справка

Класс
Свойства
staticposition: static;
fixedposition: fixed;
absoluteposition: absolute;
relativeposition: relative;
stickyposition: sticky;

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

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

Используйте static для позиционирования элемента в соответствии с обычным потоком документа.

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

Статический родитель

Абсолютный ребенок

<div class="static ...">
  <p>Статический родитель</p>
  <div class="absolute bottom-0 left-0 ...">
    <p>Абсолютный ребенок</p>
  </div>
</div>

Relatively positioning elements

Используйте 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 positioning elements

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

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

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