Contenitore non si nasconde dietro al menù

Tommy03

Utente Attivo
6 Giu 2018
596
55
28
17
Vicenza
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
201
32
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
napuleone modificare il contenitore di un div Javascript 2
napuleone modificare il contenitore di un div Javascript 1
G Importare database dentro un contenitore (docker) wordpress Programmazione 1
G importare database mysql dentro un contenitore (docker) PHP 6
P [HTML] Sfondo colorato di un div contenitore di altri due div HTML e CSS 9
F [HTML] Spazio Contenitore Full Height HTML e CSS 1
felino [CSS][Wordpress] Adattare delle immagini alla dimesione del box contenitore HTML e CSS 2
L Tooltip "prigioniero" del contenitore HTML e CSS 3
J Div in position fixed rispetto al suo contenitore jQuery 2
8 contenitore css e html HTML e CSS 9
novello88 DIV style - stilizzare un div contenitore HTML e CSS 2
emanuelevt sfondo oltre il contenitore HTML e CSS 14
M DIV contenitore di DIV flottanti HTML e CSS 1
E Orologio da polso con contenitore nascosto portapreservativi Altri Annunci 7
daviduccio Ti interessa un contenitore di files da gestire da tutto il mondo? Presenta il tuo Sito 0
D Pagina non trovata Wordpress WordPress 7
S connesso, internet non disponibile ( con extebder tp-link850) Reti LAN e Wireless 0
F Script java elenco alfabetico non funziona Javascript 3
F Script non funzionante. Devo elencare in ordine alfabetico un elenco di nominativi, ma lo script non Javascript 2
L Estrazione dati casuali non doppioni MySQL 1
napuleone non si chiude il thead e non si apre il tbody Javascript 0
napuleone non si aggiorna textarea in tempo reale Javascript 3
D Modem Asus non trasmette ogni 3/4 giorni Reti LAN e Wireless 2
M non static method cannot be referenced from a static context Java 1
napuleone Con le date il codice da di matto o forse non è così Javascript 6
M Questa pagina non carica correttamente Google Maps: aiuto!! HTML e CSS 1
M "Internet non disponibile" Reti LAN e Wireless 0
L Non vedo pc in rete Reti LAN e Wireless 0
M Numero random non ripetitivo Java 2
G pc desktop non si connette all'hotspot wifi Reti LAN e Wireless 0
L Non riesco a riprodurre uno sfondo Photoshop 0
N Server mysql non raggiungibile da connessione esterna MySQL 1
R Select concatenata che non funziona la seconda volta Ajax 3
L non duplicare dati in stato "aggiornamento" PHP 6
R [Visual Studio Community] Non trovo il Progetto di Setup .NET Framework 0
zorro file PDF non visualizzo niente PHP 9
D modificare questo codice per inserimento in text e non in tabella jQuery 1
A variabile non riconosciuta PHP 0
A Copertura: indicizzata, non inviata nella mappa del sito XML 1
A funzione iconv () non mi funziona PHP 4
D File pdf che non si aprono .... PHP 1
MarcoGrazia ON DUPLICATE KEY ma in realtà non UPDATE mai PHP 17
R Non riesco a rinnovare l'immagine di sfondo PHP 1
G non riesco a capire quale sia l'errore [SQL] MySQL 2
R Non riesco a cambiare l'immagine di sfondo PHP 4
MarcoGrazia Valori di ritorno json via ajax non visti. jQuery 1
W Non fa l'upload PHP 0
W Parametro non corretto. (code: 87) PHP 4
MarcoGrazia Se non sai se riceverai da GET o da POST, puoi verificarlo e far scegliere allo script. Snippet PHP 0
D Alias AS non funziona più con DATE_FORMAT? MySQL 2

Discussioni simili