Contenitore non si nasconde dietro al menù

Tommy03

Utente Attivo
6 Giu 2018
303
34
28
16
Bassano del Grappa (VI)
Salve, sto costruendo una pagina in cui schiacciando un bottone nell'header (in alto a sinistra), si apre una tendina e si oscura tutto il resto della pagina. Tuttavia, quando ciò accade, un contenitore non si oscura e rimane posizionato davanti alla tendina.
Qui potete vedere il problema:
Il codice che utilizzo invece è questo:


HTML:
[TABLE]
[TR]
[TD].cont{box-shadow: 0px 0px 18px rgba(63, 81, 181, 0.16);width:86%;margin-left:7%;margin-top:25px;background-color:white;height:60%;border-radius:20px;}
#cont-sinistra{width:90%;margin-left:5%;}
#nav-container .bg {[/TD]
[/TR]
[TR]
[TD]  position: absolute;[/TD]
[/TR]
[TR]
[TD]  left: 0;[/TD]
[/TR]
[TR]
[TD]  width: 100%;[/TD]
[/TR]
[TR]
[TD]  height: 100%;[/TD]
[/TR]
[TR]
[TD]  visibility: hidden;[/TD]
[/TR]
[TR]
[TD]  opacity: 0;[/TD]
[/TR]
[TR]
[TD]  transition: .3s;[/TD]
[/TR]
[TR]
[TD]  background: #000;[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD]#nav-container:focus-within .bg {[/TD]
[/TR]
[TR]
[TD]  visibility: visible;[/TD]
[/TR]
[TR]
[TD]  opacity: .6;[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD]#nav-container * {[/TD]
[/TR]
[TR]
[TD]  visibility: visible;[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD][/TD]
[/TR]
[TR]
[TD].button {[/TD]
[/TR]
[TR]
[TD]  position: relative;[/TD]
[/TR]
[TR]
[TD]  display: flex;[/TD]
[/TR]
[TR]
[TD]  flex-direction: column;[/TD]
[/TR]
[TR]
[TD]  justify-content: center;[/TD]
[/TR]
[TR]
[TD]  z-index: 1;[/TD]
[/TR]
[TR]
[TD]  -webkit-appearance: none;[/TD]
[/TR]
[TR]
[TD]  border: 0;[/TD]
[/TR]
[TR]
[TD]  background: transparent;[/TD]
[/TR]
[TR]
[TD]  border-radius: 0;[/TD]
[/TR]
[TR]
[TD]  height: 70px;[/TD]
[/TR]
[TR]
[TD]  width: 30px;[/TD]
[/TR]
[TR]
[TD]  cursor: pointer;[/TD]
[/TR]
[TR]
[TD]  pointer-events: auto;[/TD]
[/TR]
[TR]
[TD]  margin-left: 25px;[/TD]
[/TR]
[TR]
[TD]  touch-action: manipulation;[/TD]
[/TR]
[TR]
[TD]  -webkit-tap-highlight-color: rgba(0,0,0,0);[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD].icon-bar {[/TD]
[/TR]
[TR]
[TD]  display: block;[/TD]
[/TR]
[TR]
[TD]  width: 100%;[/TD]
[/TR]
[TR]
[TD]  height: 3px;[/TD]
[/TR]
[TR]
[TD]  background: #aaa;[/TD]
[/TR]
[TR]
[TD]  transition: .3s;[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD].icon-bar + .icon-bar {[/TD]
[/TR]
[TR]
[TD]  margin-top: 5px;[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD][/TD]
[/TR]
[TR]
[TD]#nav-container:focus-within .button {[/TD]
[/TR]
[TR]
[TD]  pointer-events: none;[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD]#nav-container:focus-within .icon-bar:nth-of-type(1) {[/TD]
[/TR]
[TR]
[TD]  transform: translate3d(0,8px,0) rotate(45deg);[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD]#nav-container:focus-within .icon-bar:nth-of-type(2) {[/TD]
[/TR]
[TR]
[TD]  opacity: 0;[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD]#nav-container:focus-within .icon-bar:nth-of-type(3) {[/TD]
[/TR]
[TR]
[TD]  transform: translate3d(0,-8px,0) rotate(-45deg);[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD][/TD]
[/TR]
[TR]
[TD]#nav-content {[/TD]
[/TR]
[TR]
[TD]  padding: 20px;[/TD]
[/TR]
[TR]
[TD]  width: 100%;[/TD]
[/TR]
[TR]
[TD]  max-width: 300px;[/TD]
[/TR]
[TR]
[TD]  position: absolute;[/TD]
[/TR]
[TR]
[TD]  top: 0;[/TD]
[/TR]
[TR]
[TD]  left: 0;[/TD]
[/TR]
[TR]
[TD]  height: 100%;[/TD]
[/TR]
[TR]
[TD]  background: #ececec;[/TD]
[/TR]
[TR]
[TD]  pointer-events: auto;[/TD]
[/TR]
[TR]
[TD]  -webkit-tap-highlight-color: rgba(0,0,0,0);[/TD]
[/TR]
[TR]
[TD]  transform: translateX(-100%);[/TD]
[/TR]
[TR]
[TD]  transition: transform .3s;[/TD]
[/TR]
[TR]
[TD]  will-change: transform;[/TD]
[/TR]
[TR]
[TD]  contain: paint;[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD][/TD]
[/TR]
[TR]
[TD]#nav-content ul {[/TD]
[/TR]
[TR]
[TD]  height: 100%;[/TD]
[/TR]
[TR]
[TD]  display: flex;[/TD]
[/TR]
[TR]
[TD]  flex-direction: column;[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD][/TD]
[/TR]
[TR]
[TD]#nav-content li a {[/TD]
[/TR]
[TR]
[TD]  padding: 10px 5px;[/TD]
[/TR]
[TR]
[TD]  display: block;[/TD]
[/TR]
[TR]
[TD]  text-transform: uppercase;[/TD]
[/TR]
[TR]
[TD]  transition: color .1s;[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD][/TD]
[/TR]
[TR]
[TD]#nav-content li a:hover {[/TD]
[/TR]
[TR]
[TD]  color: #BF7497;[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD][/TD]
[/TR]
[TR]
[TD]#nav-content li:not(.small) + .small {[/TD]
[/TR]
[TR]
[TD]  margin-top: auto;[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD][/TD]
[/TR]
[TR]
[TD].small {[/TD]
[/TR]
[TR]
[TD]  display: flex;[/TD]
[/TR]
[TR]
[TD]  align-self: center;[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD][/TD]
[/TR]
[TR]
[TD].small a {[/TD]
[/TR]
[TR]
[TD]  font-size: 12px;[/TD]
[/TR]
[TR]
[TD]  font-weight: 400;[/TD]
[/TR]
[TR]
[TD]  color: #888;[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD].small a + a {[/TD]
[/TR]
[TR]
[TD]  margin-left: 15px;[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD][/TD]
[/TR]
[TR]
[TD]#nav-container:focus-within #nav-content {[/TD]
[/TR]
[TR]
[TD]  transform: none;[/TD]
[/TR]
[TR]
[TD]}[/TD]
[/TR]
[TR]
[TD][/TD]
[/TR]
[TR]
[TD]</style>[/TD]
[/TR]
[TR]
[TD]<nav style="background-color:black; height:70px;top:0px;left:0px;right:0px;width:100%;position:fixed;">[/TD]
[/TR]
[TR]
[TD]<div id="nav-container">[/TD]
[/TR]
[TR]
[TD]    <div class="bg"></div>[/TD]
[/TR]
[TR]
[TD]    <div class="button" tabindex="0">[/TD]
[/TR]
[TR]
[TD]      <span class="icon-bar"></span>[/TD]
[/TR]
[TR]
[TD]      <span class="icon-bar"></span>[/TD]
[/TR]
[TR]
[TD]      <span class="icon-bar"></span>[/TD]
[/TR]
[TR]
[TD]    </div>[/TD]
[/TR]
[TR]
[TD]    <div id="nav-content" tabindex="0">[/TD]
[/TR]
[TR]
[TD]      <ul>[/TD]
[/TR]
[TR]
[TD]        <li><a href="#0">Home</a></li>[/TD]
[/TR]
[TR]
[TD]        <li><a href="#0">Services</a></li>[/TD]
[/TR]
[TR]
[TD]        <li><a href="#0">Blog</a></li>[/TD]
[/TR]
[TR]
[TD]        <li><a href="#0">About</a></li>[/TD]
[/TR]
[TR]
[TD]        <li><a href="#0">Contact</a></li>[/TD]
[/TR]
[TR]
[TD]        <li class="small"><a href="#0">Facebook</a><a href="#0">Instagram</a></li>[/TD]
[/TR]
[TR]
[TD]      </ul>[/TD]
[/TR]
[TR]
[TD]    </div>[/TD]
[/TR]
[TR]
[TD]  </div>[/TD]
[/TR]
[TR]
[TD]<p style="order: 1;text-align:center;color:white;vertical-align:center;font-size:130%;">Betwin</p>[/TD]
[/TR]
[TR]
[TD]</nav>[/TD]
[/TR]
[TR]
[TD][/TD]
[/TR]
[TR]
[TD]<div class="main">[/TD]
[/TR]
[TR]
[TD]<div class="colonne" id="sinistra"><div id="cont-sinistra" class="cont"><div style="display:inline-flex;">[/TD]
[/TR]
[TR]
[TD]<div><a href="user.php?u=prova" style="text-decoration:none;"><p id="username" style="color:black;font: bold 160% Arial, sans-serif;padding-top:5px;padding-left:25px;">prova</p></a></div>[/TD]
[/TR]
[TR]
[TD]<div><p id="percentuale" style="text-align:right;padding-top:25px;">+3%</p></div>[/TD]
[/TR]
[TR]
[TD]</div></div></div>[/TD]
[/TR]
[/TABLE]
E poi soprattutto non capisco perché è soltanto un contenitore che non funziona, mentre gli altri vanno bene...
Grazie a chi vorrà aiutarmi
 

WmbertSea

Utente Attivo
28 Nov 2014
178
27
28
Ciao, per i due contenitori che funzionano, oltre le proprietà che ne determinano il posizionamento, hai applicato z-index: -1; che fa in modo di portarli correttamente ad un livello inferiore rispetto al menu.

Il contenitore che resta davanti al menu invece non ha impostata quella proprietà. Ti sarà sufficiente impostarla anche su questo.