Contenitore non si nasconde dietro al menù

Tommy03

Utente Attivo
6 Giu 2018
606
57
28
18
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
207
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
S WORDPRESS NON FA INSTALLARE PIU NULLA WordPress 8
Shyson Non mi fa accedere al sito WordPress 12
N Non Autorizzato. Dovresti rimuovere il parametro customize_messenger_channel per visualizzare l'anteprima in frontend. WordPress 1
R INSERT INTO tabella non funziona Classic ASP 1
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
felino Conversione da MPG a MP4: audio non sincronizzato Windows e Software 1
F Telecamere Wi-Fi non si connettono A nvr IP Cam e Videosorveglianza 0
G Finestra di dialogo che non si apre - programma NUENDO Windows e Software 0
L php mysql non salva solo id PHP 21
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

Discussioni simili