Tengo este problema, estoy creando un nav estático y una lista de productos. El nav estático ya está listo y los divs que contienen los productos también, pero el problema es que cuando bajo el ratón y paso sobre los divs el nav queda por debajo de los divs. No entiendo a que se deba esto, pensé que era por el hecho de poner el texto sobre la imagen pero al inicio de la página también tengo una imagen con el texto sobre él y no sucede lo mismo. Les agradecería la ayuda y explicación de por qué pasa esto, gracias.
*{
padding: 0px;
margin: 0px;
}
body{
text-align: center;
}
#content{
width: 1024px;
margin: 15px auto;
text-align: left;
background: ;
}
header{
position: relative;
display: inline-block;
text-align: center;
padding-top: 4rem;
}
#cabecera img{
width: 1024px;
height: 450px;
}
#cabecera h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: white;
font-size: 70px;
}
#logo-nav{
display: flex;
justify-content: space-between;
background: gray;
padding: 1rem;
align-items: center;
position: fixed;
left: 0;
top: 0;
right: 0;
}
#logo-nav a{
color: white;
text-decoration: none;
}
nav ul{
list-style: none;
margin-right: 10rem;
}
nav ul li{
display: inline-block;
}
nav ul li a{
display: block;
padding: 0.5rem 1rem;
transition: all 0.4s linear;
border-radius: 5px;
}
nav ul li a:hover{
background: tomato;
}
#logo{
margin-left: 10rem;
letter-spacing: 15px;
font-size: 1.3em;
}
#seccion{
padding-top: 1rem;
text-align: center;
}
#nosotros{
background: red;
}
.productos div{
display: inline-block;
padding: 1rem;
width: 300px;
opacity: 0.8;
background:;
}
.productos div img{
width: 300px;
height: 330px;
}
.productos h3{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 30px;
color: tomato;
}
.cajon{
position: relative;
text-align: center;
}
.productos div:hover{
opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1">
<title>Música Dum</title>
<link rel="stylesheet" href="../css/paginacentral.css">
</head>
<body>
<div id="content">
<header id="cabecera">
<img src="../imagenes/central.jpg" alt="">
<h1>Musica Dum</h1>
</header>
<div id="logo-nav">
<a href="#" id="logo">Logo</a>
<nav id="menu">
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">Sobre nosotros</a></li>
<li><a href="">Redes sociales</a></li>
<li><a href="">Productos</a></li>
<li><a href="">Contacto</a></li>
</ul>
</nav>
</div>
<section id="seccion">
<div class="productos">
<article>
<h2>Productos</h2>
</article>
<div class="cajon">
<a href=""><h3>Ukeleles</h3>
<img src="../imagenes/instrumentos/ukelele.jpg" alt=""></a>
</div>
<div class="cajon">
<a href=""><h3>Guitarras Acústicas</h3>
<img src="../imagenes/instrumentos/guitarra.png" alt=""></a>
</div>
<div class="cajon">
<a href="#"><h3>Guitarras Eléctricas</h3>
<img src="../imagenes/instrumentos/electrica.png" alt=""></a>
</div>
<div class="cajon">
<a href="#"><h3>Baterías</h3>
<img src="../imagenes/instrumentos/bateria.jpg" alt=""></a>
</div>
<div class="cajon">
<a href="#"><h3>Sintetizadores</h3>
<img src="../imagenes/instrumentos/teclado.jpg" alt=""></a>
</div>
<div class="cajon">
<a href="#"><h3>Trompetas</h3>
<img src="../imagenes/instrumentos/trompeta.jpg" alt=""></a>
</div>
</div>
<div id="nosotros">
<article>
<h2>Misión</h2>
<p>Llevar el amor por la música a todas las personas</p>
<h2>Visión</h2>
<p>Expandir nuestro amor por el mundo</p>
</article>
</div>
<div id="Contacto">
<h2>Contactenos.</h2>
</div>
</section>
<aside id="columna">
</aside>
<footer id="pie">
</footer>
</div>
</body>
</html>