Couvrir le texte (avec opacité CSS) avec un div

Question

après recherche, je ne pouvais pas vraiment trouver une réponse, donc je le demande ici. Pour une version mobile de mon site Web, j'aimerais avoir un bouton pour ouvrir un menu de navigation (qui est statique sur la version de bureau) et couvrir la partie principale. Je voulais que le texte de la partie principale soit visible tout le temps, mais quand le menu de navigation était ouvert, il était effacé. J'ai trouvé la fonction d'opacité de CSS, qui semblait prometteuse que Javascript ait fonctionné pour tout cela, mais la div Nav n'a pas caché le texte évanoui de la partie principale quand il était couvert. Quelqu'un peut-il aider? Voici mon code:

function openNav() { 
 
document.getElementById("nav").style.left = "5px"; 
 
document.getElementById("list").style.opacity = "0.5"; 
 
document.getElementById("navc").style.display = "inline"; 
 
} 
 
function closeNav() { 
 
document.getElementById("nav").style.left = "-206px"; 
 
document.getElementById("list").style.opacity = "1"; 
 
document.getElementById("navc").style.display = "none"; 
 
}

body { 
 
background-color: #000000; 
 
color: #ffffff; 
 
margin-bottom: 0; 
 
margin-right: 5px; 
 
margin-left: 5px; 
 
margin-top: 5px; 
 
} 
 
#nav { 
 
background-color: rgba(0, 0, 0, 1.0); 
 
width: 188px; 
 
margin-left: auto; 
 
margin-right: auto; 
 
text-align: left; 
 
line-height: 16px; 
 
border: 1px solid white; 
 
border-bottom: 0; 
 
border-top: 0; 
 
padding: 8px; 
 
height: 785px; 
 
position: absolute; 
 
left: -206px; 
 
overflow: auto; 
 
} 
 
#navm { 
 
height: 30px; 
 
width: 30px; 
 
display: inline; 
 
position: absolute; 
 
top: 6px; 
 
right: 6px; 
 
} 
 
#navc { 
 
display: none; 
 
height: 30px; 
 
width: 30px; 
 
position: absolute; 
 
top: 6px; 
 
right: 6px; 
 
} 
 
#list { 
 
margin-left: 205px; 
 
width: 310px; 
 
line-height: 18px; 
 
text-align: left; 
 
padding: 8px; 
 
position: absolute; 
 
left: -208px; 
 
} 
 
#banner { 
 
width: 308px; 
 
height: 30px; 
 
border: 1px solid white; 
 
position: relative; 
 
margin-top: 0; 
 
display: block; 
 
}

<div id="container"> 
 
<img src="/img/banner.png" alt="Banner" id="banner"> 
 
<img src="/img/navm.png" alt="" id="navm" onclick="openNav()"> 
 
<img src="/img/navc.png" alt="" id="navc" onclick="closeNav()"> 
 
<div id="nav"> 
 
<a href="/link1.html">Link 1</a><br> 
 
<a href="/link2.html">Link 2</a><br> 
 
<a href="/link3.html">Link 3</a><br><br> 
 
<a href="/link4.html">Link 4</a><br><br> 
 
</div> 
 
<div id="list"> 
 
<h3 class="list" style="margin-top: 0">About Us</h3> 
 
<div class="bio" style="margin-bottom: 14px"> 
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. <a href="/link5.html">Link 5 &gt;&gt;</a> 
 
</div> 
 
    </div>

Answer 1

Ce qu'il faut, à mon avis est z-index. opacity affecte uniquement la visibilité de l'élément en cours.

Définissez z-index: 100 à l'intérieur de la classe .nav. Cela devrait résoudre votre problème.

For further information..