Позиционирование

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

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

Фиксированное сверху

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

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

Фиксированное снизу

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

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

Липкое сверху

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

<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-xxl-top">Прикрепляется к верху на экранах размера XXL (очень-очень большие) или шире</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>