Contenitore non si nasconde dietro al menù

Tommy03

Utente Attivo
6 Giu 2018
616
58
28
20
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

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
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 4
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
felino Mac OS e Client Mail: Stato non in linea Mac e Software 1
I nome utente non esiste nel database PHP 1
M Drag and Drop non capisco le sequenze... Javascript 1
L Suggerimento Pagespeed per non vedenti HTML e CSS 0
F comando di inclusione file audio in I-Pad non funziona HTML e CSS 1
M Immagini non usate WordPress 0
B Non riesco a trovare i cognomi con i caratteri speciali in Access (Microsoft 365) MS Access 0
G Numero zero null non deve visualizzare nulla PHP 0
F Paypal _xclick IPN non risponde PHP 1
R Variabile non risconosciuta dentro una funzione PHP 1
C ACCESS Aprire maschera se valore non presente in una combo MS Access 7
E Alert non viene mostrato PHP 1
felino Hardisk WD SATA 1TB 3.5" non si avvia! Hardware 4
K Scrip non funzionante Javascript 1
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
zorro CREATE TABLE non funziona PHP 6
L tipo boolean non funzionante su mariadb (mysql). E codice php 7.4. PHP 0
Sevenjeak Php8 non carica estenzioni PHP 0
R query DELETE non cancella i record PHP 1
otto9due Input text: accetta solo numeri e non può essere vuoto. Javascript 9
G Non vedo frecce su forme Photoshop 2
G Il mio sito dopo aver abilitato l'ssl non visualizza le immagini con indirizzi senza ssl HTML e CSS 0
P jquery refresh div non funziona Javascript 0
N Problema SEO "L'URL non si trova su Google" SEO e Posizionamento 4
S Certificato SSL non funzionante Domini 0
zorro modulo di registrazione: funziona ma non sempre PHP 2
D Form contatti non funzionante HTML e CSS 0
MarcoGrazia Trovare record nel database partendo da id non sequenziali PHP 6
M Non ho rinnovato il mio sito su Aruba... Domini 1
T IP INFO NON FUNZIONA PHP 0
Shyson Google search non trova il mio sito SEO e Posizionamento 1
E Estrarre dati da doppia tabella, banale ma non sempre PHP 1
P Data scraping in PHP non funziona PHP 4
otto9due $_FILE non passa i dati dal form PHP 1
keyascii Non è mai troppo tardi Presentati al Forum 0

Discussioni simili