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:
E poi soprattutto non capisco perché è soltanto un contenitore che non funziona, mentre gli altri vanno bene...
Grazie a chi vorrà aiutarmi
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]
Grazie a chi vorrà aiutarmi