Перейти к основному содержанию Перейти к навигации по документам
Check
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>

«Липкий» низ

Поместите элемент в нижней части окна просмотра, от края до края, но только после того, как вы прокрутите его.

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

Адаптивный «липкий» низ

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

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