Z-index

Используйте наши низкоуровневые утилиты 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 — dropdown, modal, offcanvas, popover, toast и tooltip — все имеют свои собственные значения 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,
)