Позиция

​

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

​

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

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