Diseño CSS : la propiedad del índice z
La z-indexpropiedad especifica el orden de pila de un elemento.
La propiedad del índice z
Cuando los elementos se colocan, pueden superponerse a otros elementos.
La z-indexpropiedad especifica el orden de apilamiento de un elemento (qué elemento debe colocarse delante o detrás de los demás).
Un elemento puede tener un orden de pila positivo o negativo:
este es un encabezado
Debido a que la imagen tiene un índice z de -1, se colocará detrás del texto.
Ejemplo
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Nota: z-index solo funciona en elementos posicionados (posición: absoluta, posición: relativa, posición: fija o posición: pegajosa) y elementos flexibles
(elementos que son hijos directos de visualización: elementos flexibles).
Otro ejemplo de índice z
Ejemplo
Aquí vemos que un elemento con mayor orden de apilamiento siempre está por encima de un elemento con menor orden de apilamiento:
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
z-index: 3;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
z-index: 2;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
Sin índice z
Si dos elementos colocados se superponen sin z-index
especificar, el último elemento definido en el código HTML se mostrará en la parte superior.
Ejemplo
El mismo ejemplo que el anterior, pero aquí sin especificar el índice z:
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
.green-box {
position: absolute;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height:
100px;
}
</style>
</head>
<body>
<div class="container">
<div
class="black-box">Black box</div>
<div class="gray-box">Gray
box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
Propiedad CSS
| Property | Description |
|---|---|
| z-index | Sets the stack order of an element |