Contenitore non si nasconde dietro al menù

Tommy03 · 15 Mar 2020

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:

https://betwin.altervista.org/home.php

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 · 15 Mar 2020

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.

Cerca

Cerca

Contenitore non si nasconde dietro al menù

Tommy03

Utente Attivo

WmbertSea

Moderatore

Discussioni simili