Z-index
Utiliza nuestras utilidades z-index de bajo nivel para cambiar rápidamente el
nivel de pila de un elemento o componente.
Ejemplo
Utiliza las utilidades z-index para apilar elementos uno encima del otro. Requiere un valor de
position distinto de static, que se puede configurar con estilos personalizados o
usando nuestras utilidades de posición.
z-index de “bajo nivel” debido a sus valores predeterminados de
-1 a 3, que utilizamos para el diseño de componentes superpuestos. Los valores
z-index de alto nivel se utilizan para componentes superpuestos como modales o tooltips.
<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 de superposición de Bootstrap (desplegable, modal, offcanvas, popover, toast y tooltips)
tienen sus propios valores z-index para garantizar una experiencia utilizable con “capas”
competitivas de una interfaz.
Lee sobre ellos en la página de z-index (sección
layout).
Enfoque de componentes
En algunos componentes, usamos nuestros valores z-index de bajo nivel para administrar elementos
repetidos que se superponen entre sí (como botones en un grupo de botones o elementos en un grupo de lista).
Más información sobre nuestro enfoque z-index..
CSS
Mapas de Sass
Personaliza este mapa de Sass para cambiar los valores disponibles y las utilidades generadas.
$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 API de utilidades en scss/_utilities.scss. Aprende a utilizar la API de utilidades.
"z-index": (
property: z-index,
class: z,
values: $zindex-levels,
)