2.3 KiB
title | localeTitle |
---|---|
Z Index | Índice Z |
Índice Z
El índice Z (índice z-index
) es una propiedad CSS que define el orden de los elementos HTML superpuestos. Los elementos con un índice más alto se colocarán sobre los elementos con un índice más bajo.
Nota : el índice Z solo funciona en los elementos posicionados ( position:absolute
, position:relative
o position:fixed
).
Valores posibles
/* Default value if not specified */
z-index: auto;
/* Integer values */
z-index: 1;
z-index: 100;
z-index: 9999;
z-index: -1;
/* Global values */
z-index: inherit;
z-index: initial;
z-index: unset;
Ejemplo de uso
En este ejemplo, puede ver tres cuadros mostrados uno encima del otro en diferentes órdenes utilizando z-index
.
HTML
<div class="container">
<div class="box" id="blue"></div>
<div class="box" id="red"></div>
<div class="box" id="green"></div>
</div>
CSS
#blue {
background-color: blue;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
Como z-index
no se definió, tendrá un valor predeterminado de auto
. Este es un resultado:
Intente cambiar el orden a Verde, Azul, Rojo en CSS usando z-index
.
#blue {
background-color: blue;
z-index: 2;
}
#red {
background-color: red;
z-index: 1;
}
#green {
background-color: green;
z-index: 3;
}
Su resultado será:
Utilice Z Index si necesita colocar un elemento de fondo debajo de un contenedor. Puede colocar fácilmente el fondo debajo de cada elemento dándole un Índice Z negativo como el siguiente:
#background {
z-index: -1;
}
Más información:
https://css-tricks.com/almanac/properties/z/z-index/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS Posicionamiento / comprensión z_index
https://philipwalton.com/articles/what-no-one-told-you-about-z-index/