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.
A estas las llamamos utilidades 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.
scss/_variables.scss (opens in a new tab)
$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.
scss/_utilities.scss (opens in a new tab)
"z-index": (
property: z-index,
class: z,
values: $zindex-levels,
)