Перейти к основному содержанию Перейти к навигации по документам
Cмотреть на GitHub

Положение

Используйте эти помощники для быстрой настройки положения элемента.

На этой странице

Прикрепленный сверху

Располагайте элементы вверху области видимости, от края до края. Удостоверьтесь, что вы понимаете последствия фиксированной позиции в вашем проекте. Вам может потребоваться добавить дополнительные классы CSS.

<div class="fixed-top">...</div>

Прикрепленный внизу

Располагайте элементы у нижнего края видимости, от края до края. Удостоверьтесь, что вы понимаете последствия фиксированной позиции в вашем проекте. Вам может потребоваться добавить дополнительные классы CSS.

<div class="fixed-bottom">...</div>

«Липкий» верх

Позиционируйте элемент у верхнего края области видимости, от края до края, но только после того, как область видимости прокрутится после него. Класс .sticky-top использует position: sticky, который поддерживается не всеми браузерами.

<div class="sticky-top">...</div>

Адаптивный «липкий» верх

Адаптивные варианты также существуют для утилиты .sticky-top.

<div class="sticky-sm-top">Прикрепляется к верхней части окна при просмотре размером SM (маленький) или шире</div>
<div class="sticky-md-top">Прикрепляется к верхней части окна при просмотре размером MD (средний) или шире</div>
<div class="sticky-lg-top">Прикрепляется к верхней части окна при просмотре размером LG (большой) или шире</div>
<div class="sticky-xl-top">Прикрепляется к верхней части окна при просмотре размером XL (очень большой) или шире</div>