33-indice z en css

La propriedad índice z especifica el orden de pila de un elemento.

Cuando los elementos se colocan, pueden superponerse a otros elementos.

La propriedad indice Z 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.

---

...

codigo del ejemplo

        img {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: -1;
          }
    

Nota: z-indexsolo 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 display: elementos flexibles).

Otro ejemplo

Black box (z-index: 1)

Gray box (z-index: 3)

Green box (z-index: 2)

Ejemplo del codigo

<div class="container">
<div style=" position: relative;z-index: 1; border: 2px solid black;height: 100px; margin: 30px;">Black box (z-index: 1)</div>
<div style="position: absolute;z-index: 3; /* gray box will be above both green and black box */background: lightgray;height: 60px;  width: 70%;left: 50px;top: 50px;">Gray box (z-index: 3)</div>
<div style=" position: absolute;z-index: 2; /* green box will be above black box */ background: lightgreen;width: 35%;left: 270px;top: -15px;height: 100px;">Green box (z-index: 2)</div>
</div>
        

Si dos elementos posicionados se superponen entre sí sin z-index especificado, el último elemento definido en el código HTML se mostrará en la parte superior.

---

Ir al indice