Bootstrap 5 Position: позиционирование элементов с легкостью

Основные классы позиционирования

position-static

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

<div class="position-static">
    <!-- Ваш контент здесь -->
</div>

position-relative

С помощью этого класса вы можете создать относительное позиционирование. Элемент будет смещаться относительно своего обычного положения.

<div class="position-relative">
    <!-- Ваш контент здесь -->
</div>

position-absolute

Класс position-absolute позволяет создавать абсолютное позиционирование. Элемент будет позиционироваться относительно ближайшего родительского элемента с позицией, отличной от static.

<div class="position-absolute top-0 start-0">
    <!-- Ваш контент здесь -->
</div>

position-fixed

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

<div class="position-fixed top-0 end-0">
    <!-- Ваш контент здесь -->
</div>

Fixed top

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

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

Fixed bottom

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

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

position-sticky

position-sticky позволяет создавать прилипающую позицию. Элемент будет прилипать к верхней или нижней части экрана при прокрутке.

<div class="position-sticky top-50 start-50">
    <!-- Ваш контент здесь -->
</div>

Sticky top

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

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

Responsive sticky top

Адаптивные варианты также существуют для .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>

Sticky bottom

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

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

Responsive sticky bottom

Адаптивные варианты также существуют для утилиты .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>

Центрирование элементов

Чтобы центрировать элементы, используйте класс .translate-middle. Этот класс применяет трансформации translateX(-50%) и translateY(-50%), что позволяет абсолютно центрировать элемент.

<div class="position-relative">
    <div class="position-absolute top-0 start-0 translate-middle">
        <!-- Ваш контент здесь -->
    </div>
</div>

Вы также можете центрировать элементы только по горизонтали или вертикали, добавив классы .translate-middle-x или .translate-middle-y.

<div class="position-relative">
    <div class="position-absolute top-0 start-50 translate-middle-x">
        <!-- Ваш контент здесь -->
    </div>
</div>

Примеры

Вот несколько реальных примеров использования этих классов:

1. Кнопка с меткой “Mails +99”:
   

   <button type="button" class="btn btn-primary position-relative">
       Mails +99
   </button>

2. Маркер на карте:
   

   <div class="position-absolute top-50 start-50 translate-middle">
       <img src="marker.png" alt="Маркер">
   </div>

3. Уведомления:
   

   <div class="position-fixed top-0 end-0">
       <div class="alert alert-danger">
           Ошибка: недостаточно места на диске!
       </div>
   </div>

Заключение

Позиционирование элементов – это важный аспект веб-дизайна. С помощью Bootstrap 5 вы можете легко управлять расположением элементов на странице, делая ваш интерфейс более привлекательным и функциональным. Надеюсь, что эта статья поможет вам лучше понять, как использовать классы позиционирования и создавать уникальные веб-компоненты с помощью Bootstrap 5.