Перейти к основному содержанию Перейти к навигации по документации
Добавлено в v5.3 На GitHub

Z-индекс

Используйте наши низкоуровневые утилиты z-index, чтобы быстро изменить уровень стека элемента или компонента.

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

Пример

Используйте утилиты z-index, чтобы размещать элементы друг над другом. Требуется значение position, отличное от static, которое можно установить с помощью пользовательских стилей или с помощью наших утилит позиционирования.

Мы называем эти «низкоуровневые» утилиты z-index из-за их значений по умолчанию от -1 до 3, которые мы используем для компоновки перекрывающихся компонентов. Значения z-index высокого уровня используются для компонентов наложения, таких как модальные окна и всплывающие подсказки.
html
<div class="z-3 position-absolute p-5 rounded-3"></div>
<div class="z-2 position-absolute p-5 rounded-3"></div>
<div class="z-1 position-absolute p-5 rounded-3"></div>
<div class="z-0 position-absolute p-5 rounded-3"></div>
<div class="z-n1 position-absolute p-5 rounded-3"></div>

Наложения

Компоненты оверлея Bootstrap — раскрывающийся список, модальное окно, вне холста, всплывающее окно, всплывающее окно и всплывающая подсказка — все имеют свои собственные значения z-index, чтобы обеспечить удобство использования с конкурирующими «слоями» интерфейса.

Читайте о них на странице макета z-index.

Компонентный подход

В некоторых компонентах мы используем низкоуровневые значения z-index для управления повторяющимися элементами, которые перекрывают друг друга (например, кнопки в группе кнопок или элементы в группе списка).

Узнайте о нашем подходе z-index.

CSS

Sass карта

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

$zindex-levels: (
  n1: -1,
  0: 0,
  1: 1,
  2: 2,
  3: 3
);