Z-index
Utiliza nuestras utilidades de z-index de bajo nivel para cambiar rápidamente el nivel de superposición de un elemento o componente.
Ejemplo
Utiliza las utilidades z-index para apilar elementos uno encima de otro. Requiere un valor de position que no sea static, que se puede establecer con estilos personalizados o utilizando nuestras utilidades de posición.
Llamamos a estas utilidades z-index de "bajo nivel" debido a sus valores predeterminados de -1 a 3, que usamos para el diseño de componentes superpuestos. Los valores de z-index de alto nivel se utilizan para componentes de superposición como modales y 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 (Overlays)
Los componentes de superposición de Bootstrap (dropdown, modal, offcanvas, popover, toast y tooltip) tienen sus propios valores de z-index para garantizar una experiencia utilizable con las "capas" de una interfaz.
Lee sobre ellos en la página de diseño de z-index.
Enfoque de componentes
En algunos componentes, utilizamos nuestros valores de 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).
Obtén más información sobre nuestro enfoque de z-index.
CSS
Mapas Sass
Personaliza este mapa 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,
)