Para que funcione Z-index correctamente debes cumplir con unas condiciones, principalmente se usa de la siguiente forma:
<main class="padre">
<div class="hermano uno">
<img class="hijo" src=".png"/>
</div>
<div class="hermano dos">
</div>
</main>
Principalmente para que funcionen las capas de z-index, deben estar al mismo nivel de parentesco, por ejemplo con el código anterior el z-index funcionará con los dos "hermanos", pero no funcionará entre el hijo y el hermano dos. Lo otro que es necesario agregar es position: relative, fixed o absolute según sea el caso. Entonces las condiciones, formalmente escritas serían:
- Los elementos situados en capas, deben estar al mismo nivel de jerarquía en la maquetación html.
- Deben tener declarado position diferente al default que es static.
- Los elementos anidados en una capa inferior o superior, heredarán la capa declarada en su contenedor, pero nunca se superpondran al nivel declarado al ancestro contenedor ni a los elementos "hermanos" al padre.
El error más tipico es creer que esto funcionará en css, así:
.hermano, .hijo {position: relative;}
.hijo{z-index: 1; }
.hermano.dos {z-index: 9999}
Sí la imagen "hijo", es mayor que la altura del "hermano uno" esta se sobrepondra al "hermano dos", por lo que al querer corregir esto se intenta usar un z-index en el "hermano dos" altísimo para tratar sin resultados de corregir esto, pero como te mencione, al no estar al mismo nivel, el hijo y el hermano dos, esto nunca funcionará, en este caso, hay que declarar el z-index en los dos hermanos y aumentar el valor en el que va a sobreponerse, así:
.hermano, .hijo {position: relative;}
.hermano.uno {z-index: 1}
.hijo{}
.hermano.dos {z-index: 2}
Espero que haya quedado claro, o que efectivamente sea el error que se te presenta, lo cierto es que como muchos han comentado tú código puesto en la pregunta, no reproduce el error y es muy difícil saber como ayudarte de mejor manera. Éxitos!