Estoy tratando de entender cómo funciona el índice z. Para hacer eso, he creado un ejemplo simple que consta de cinco divs. Cada uno es hijo del anterior, excepto el primero. Mi objetivo es hacer que el primer div, el contenedor principal de todos los demás divs, se muestre encima de todos los demás, ocultándolos efectivamente.

Para lograr mi objetivo, puse propiedades de índice z en todos los divs y en el div padre puse un valor exagerado de 100 para asegurarme de que es más alto que todos los demás, pero no parece estar funcionando. .

He leído muchas documentaciones diferentes sobre el índice z y he leído muchas respuestas aquí en Stack Overflow. Hasta ahora he intentado lo siguiente:

Agregar propiedades de posición a todos los divs.Agregar opacidad con un valor de 0.99 a los divs que quiero ocultar.Aplicar diferentes combinaciones de valores del atributo de posición (por ejemplo, relativo, fijo, absoluto).

Aún así, no he tenido éxito en hacer que el div padre aparezca encima de todos los otros divs. ¿Qué estoy haciendo mal?

He creado un JSFiddle con el ejemplo que acabo de describir:https://jsfiddle.net/y8jfdz7w/15/.

.first {
  position: absolute;
  z-index: 100;
  width: 500px;
  height: 500px;
  background-color: grey;
}
.second {
  position: absolute;
  z-index: 2;
  width: 450px;
  height: 450px;
  top: 25px;
  left: 25px;
  background-color: orange;
  opacity: 0.99;
}
.third {
  position: absolute;
  z-index: 3;
  width: 400px;
  height: 400px;
  top: 25px;
  left: 25px;
  background-color: yellow;
  opacity: 0.99;
}
.fourth {
  position: absolute;
  z-index: 20;
  width: 350px;
  height: 350px;
  top: 25px;
  left: 25px;
  background-color: green;
  opacity: 0.99;
}
.fifth {
  position: absolute;
  z-index: 5;
  width: 300px;
  height: 300px;
  top: 25px;
  left: 25px;
  background-color: pink;
  opacity: 0.99;
}

<div class="first">
  <div class="second">
    <div class="third">
      <div class="fourth">
        <div class="fifth">
        </div>
      </div>
    </div>
  </div>
</div>