Позиция

Общие значения

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

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

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

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

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

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

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

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

Липкий верх

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

IE11 и IE10 отрисуют position: sticky как position: relative. Поэтому мы обернули стили в очередь @supports, что применяет липкость лишь к браузерам, которые отрисуют ее правильно.

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