Метод позиционирования элемента

position
sm
md
lg
xl

Классы

Класс Значение
static position: static;
relative position: relative;
absolute position: absolute;
fixed position: fixed;
sticky position: sticky;

Описание

Модификатор управляет расположением элемента в DOM.

Использование: {условие действия}:{модификатор}

  • Условие действия. Необязательный параметр. Определяет условие действия модификатора. Может принимать значения:
    • sm — для экранов small и больше.
    • md — для экранов medium и больше.
    • lg — для экранов large и больше.
    • xl — для экранов extra large и больше.
  • Модификатор. Обязательный параметр.
    • static — позиционирование элемента в соответствии с обычным потоком документа. Не может является контейнером для абсолютно позионированных дочерних элементов.
    • relative — позиционирование элемента в соответствии с обычным потоком документа. Может является контейнером для абсолютно позионированных дочерних элементов.
    • absolute — позиционирование элемента за пределелами обычного потока документа.
    • fixed — фиксирование элемента относительно окна браузера. Может является контейнером для абсолютно позионированных дочерних элементов.
    • sticky — ведет себя как relative до тех пор пока не пересечет определенный порог, после этого ведет себя как fixed. Может является контейнером для абсолютно позионированных дочерних элементов.

Пример

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

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

Не может является контейнером для абсолютно позионированных дочерних элементов.

Статический родитель
Абсолютный ребенок 
<div class="relative bg-primary-container p-2">
    <div class="static h-d5 bg-primary p-1">
    Статический родитель
    <div class="absolute bottom-0 left-0 bg-info-contrast p-1 color-on-surface-inverse">
        Абсолютный ребенок
    </div>
    </div>
</div>

Относительное позиционирование

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

Может является контейнером для абсолютно позионированных дочерних элементов.

Относительный родитель
Абсолютный ребенок 
<div class="relative bg-primary-container p-2">
    <div class="relative h-d5 bg-primary p-1">
    Относительный родитель
    <div class="absolute bottom-0 left-0 bg-info-contrast p-1 color-on-surface-inverse">
        Абсолютный ребенок
    </div>
    </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>

Фиксированное позиционирование

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

Может является контейнером для абсолютно позионированных дочерних элементов.

Фиксированный ребенок

Прокрути меня!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna.

Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi.

Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque.

Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.

Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.

Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. 

<div>
  <div class="fixed ...">
    Фиксированный ребенок
  </div>

  Прокрути меня!

  Lorem ipsum...
</div>

Липкое позиционирование

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

Может является контейнером для абсолютно позионированных дочерних элементов.

Липкий заголовок 1

Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi.

Липкий заголовок 2

Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque.

Липкий заголовок 3

Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.

Липкий заголовок 4

Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi.

Липкий заголовок 5

Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque.

Липкий заголовок 6

Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. 

<div>
  <div class="sticky top-0 ...">Липкий заголовок 1</div>
  <p class="p-top-1 p-bottom-1">Quisque cursus...</p>
</div>
<div>
  <div class="sticky top-0 ...">Липкий заголовок 2</div>
  <p class="p-top-1 p-bottom-1">Integer lacinia...</p>
</div>
<div>
  <div class="sticky top-0 ...">Липкий заголовок 3</div>
  <p class="p-top-1 p-bottom-1">Nullam mauris...</p>
</div>
<!-- etc. -->

Адаптивность

Для управления расположением элемента в DOM, начиная с определенного размера области просмотра, добавьте префикс контрольной точки ( sm, md, lg, xl ) через двоеточие (:) к модификатору.

Например, воспользуйтесь модификатором md:relative для создания родителя для абсолютных дочерних элементов для экранов размером Medium и больше.

<div class="md:relative"></div>

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

Изменить статью