position

Примеры

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

Используйте утилиту 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 для позиционирования элемента вне нормального потока документа, заставляя соседние элементы вести себя так, как будто элемент не существует:

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

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

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

Используйте утилиту fixed для позиционирования элемента относительно окна браузера:

Прокрутите этот элемент, чтобы увидеть фиксированное позиционирование в действии

Контакты

Эндрю Альфред

Дебра Хьюстон

Джейн Уайт

Рэй Флинт

Минди Альбрект

Дэвид Арнольд

<div class="relative">  <div class="fixed top-0 right-0 left-0">Контакты</div>  <div>    <div>      <img src="/img/andrew.jpg" />      <strong>Эндрю Альфред</strong>    </div>    <div>      <img src="/img/debra.jpg" />      <strong>Дебра Хьюстон</strong>    </div>    <!-- ... -->  </div></div>

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

Липкое позиционирование элементов

Используйте утилиту sticky для позиционирования элемента как relative до тех пор, пока он не пересечет указанный порог, а затем обрабатывайте его как fixed до тех пор, пока его родитель не исчезнет с экрана:

Прокрутите этот элемент, чтобы увидеть липкое позиционирование в действии

А

Эндрю Альфред

Айша Хьюстон

Анна Уайт

Энди Флинт

Б

Боб Альфред

Бьянка Хьюстон

Брианна Уайт

Берт Флинт

В

Колтон Альфред

Синтия Хьюстон

Шайенн Уайт

Чарли Флинт

<div>  <div>    <div class="sticky top-0 ...">А</div>    <div>      <div>        <img src="/img/andrew.jpg" />        <strong>Эндрю Альфред</strong>      </div>      <div>        <img src="/img/aisha.jpg" />        <strong>Айша Хьюстон</strong>      </div>      <!-- ... -->    </div>  </div>  <div>    <div class="sticky top-0">Б</div>    <div>      <div>        <img src="/img/bob.jpg" />        <strong>Боб Альфред</strong>      </div>      <!-- ... -->    </div>  </div>  <!-- ... --></div>

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

Адаптивный дизайн

Префикс a position утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="relative md:absolute ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.