Problema con z-index

[Tommy03]

Salve, ho un problema con z-index:
Come si può vedere qui, i box blu contenenti le icone se apro il menu non diventano opachi come il resto della pagina, e, ancora peggio, se faccio da mobile passano sopra la navbar e restano sopra al menu quando lo apro.
Ho provato a mettere z-index:-1 ma così facendo spariscono proprio perché sono all'interno di un altro contenitore.
Il codice incriminato è questo (le parti blu che restano sopra al menù hanno class="link-sx"):

.links{width:90%;height:90%;margin:5%;background-color:white;border-radius:10px;}
  .ombre{box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);}
  .link-sx{width:20%;height:100%;background-color:blue;border-radius: 10px 0 0 10px;position:relative;}

<div class="conteni" style="height:150px;"><a href="sfide.php"><div class="links ombre"><div class="link-sx"><i class="fa fa-users fa-2x link-ic"></i></div></div></a></div>

Grazie mille e buona giornata

 

[marino51]

prova a guardare la console, vi sono elencati alcuni errori importanti che dovrebbero essere corretti

 

[Tommy03]

Grazie della risposta, ho risolto gli errori in rosso, ne sono rimasti diversi in giallo ma purtroppo mi sa che non riguardano il mio problema di CSS.

 

[Tommy03]

Ho risolto mettendo position:absolute nel contenitore principale della pagina