Z-индекс

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

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

Пример

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

Мы называем эти «низкоуровневые» утилиты z-index из-за их значений по умолчанию от -1 до 3, которые мы используем для компоновки перекрывающихся компонентов. Значения z-index высокого уровня используются для компонентов наложения, таких как модальные окна и всплывающие подсказки.

z-3

z-2

z-1

z-0

z-n1

html

<div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div>
<div class="z-2 position-absolute p-5 rounded-3"><span>z-2</span></div>
<div class="z-1 position-absolute p-5 rounded-3"><span>z-1</span></div>
<div class="z-0 position-absolute p-5 rounded-3"><span>z-0</span></div>
<div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div>

Наложения

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

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

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

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

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

CSS

Sass карта

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

scss/_variables.scss

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

Sass API утилиты

Позиционные утилиты объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

scss/_utilities.scss

"z-index": (
  property: z-index,
  class: z,
  values: $zindex-levels,
)