Añadido en v5.3 Ver en GitHub

Z-index

Usa nuestras utilidades de bajo nivel z-index para cambiar rápidamente el nivel de apilamiento de un elemento o componente.

On this page

Ejemplo

Usa las utilidades z-index para apilar elementos uno sobre otro. Requiere un valor de position distinto a static, que se puede establecer con estilos personalizados o usando nuestras utilidades de posición.

Llamamos a estas utilidades de z-index de "bajo nivel" por sus valores predeterminados de -1 a 3, que usamos para el layout de componentes superpuestos. Los valores de z-index de alto nivel se usan para componentes superpuestos como modales y tooltips.

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>

Superposiciones

Los componentes superpuestos de Bootstrap—dropdown, modal, offcanvas, popover, toast y tooltip—tienen todos sus propios valores de z-index para asegurar una experiencia usable con "capas" competidoras de una interfaz.

Lee sobre ellos en la página de layout z-index.

Enfoque por componentes

En algunos componentes, usamos nuestros valores de z-index de bajo nivel para gestionar elementos repetitivos que se superponen (como botones en un grupo de botones o ítems en un grupo de lista).

Conoce nuestro enfoque de z-index.

CSS

Mapas de Sass

Personaliza este mapa Sass para cambiar los valores disponibles y las utilidades generadas.

scss/_variables.scss

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

API de utilidades de Sass

Las utilidades de posición se declaran en nuestra utilities API en scss/_utilities.scss. Aprende a usar la utilities API.

scss/_utilities.scss

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