Diseño de disposición - atributo z-index

z-index propiedad especifica el orden de apilamiento del elemento.

propiedad z-index

Cuando un elemento se posiciona, puede superponerse a otros elementos.

z-index propiedad especifica el orden de apilamiento del elemento (qué elemento debe estar delante y qué elemento debe estar detrás).

el orden de apilamiento del elemento puede ser un número positivo o negativo:

Esto es un título

debido a que la imagen de z-index con -1, por lo que se colocará detrás del texto.

ejemplo

img {
  posición: absoluta;
  izquierda: 0px;
  top: 0px;
  z-index: -1;
}

Intente hacerlo usted mismo

Nota:z-index sólo se aplica aelementos de posicionamiento（posición: absoluta、posición: relativa、posición: fija o posición: sticky）yelementos flexibles（display: flex elementos que son directos hijos).

Otro ejemplo de z-index

ejemplo

Aquí, podemos ver que los elementos con un orden de apilamiento mayor siempre están encima de los elementos con un orden de apilamiento menor:

<html>
<head>
<style>
.contenedor {
  posición: relativa;
}
.caja-negra {
  posición: relativa;
  z-index: 1;
  borde: 2px sólido negro;
  height: 100px;
  margen: 30px;
}
.caja-gris {
  posición: absoluta;
  z-index: 3;
  fondo: gris claro;
  alto: 60px;
  ancho: 70%;
  izquierda: 50px;
  top: 50px;
}
.caja-verde {
  posición: absoluta;
  z-index: 2;
  fondo: verde claro;
  ancho: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Caja negra</div>
  <div class="gray-box">Caja gris</div>
  <div class="green-box">Caja verde</div>
</div>
</body>
</html>

Intente hacerlo usted mismo

sin z-index

Si dos elementos de posicionamiento no se especifican z-index se superponen en el casoEl código HTML define por última vezel elemento se mostrará en la parte superior.

ejemplo

Igual que el ejemplo anterior, pero aquí no se especifica z-index：

<html>
<head>
<style>
.contenedor {
  posición: relativa;
}
.caja-negra {
  posición: relativa;
  borde: 2px sólido negro;
  height: 100px;
  margen: 30px;
}
.caja-gris {
  posición: absoluta;
  fondo: gris claro;
  alto: 60px;
  ancho: 70%;
  izquierda: 50px;
  top: 50px;
}
.caja-verde {
  posición: absoluta;
  fondo: verde claro;
  ancho: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Caja negra</div>
  <div class="gray-box">Caja gris</div>
  <div class="green-box">Caja verde</div>
</div>
</body>
</html>

Intente hacerlo usted mismo

Atributo CSS

Atributo Descripción
z-index Establecer el orden de apilamiento de elementos.