Z-index

Используйте наши низкоуровневые утилиты 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
);