Stack Overflow en español Asked on November 10, 2021
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>Solo falta agregar z-index al nav. Puedes usar un valor mayor a cero para que aparezca sobre el contenido. Los elementos con z-index mas alto apareceran sobre otros si son superpuestos.
https://developer.mozilla.org/es/docs/Web/CSS/z-index
#logo-nav{
display: flex;
justify-content: space-between;
background: gray;
padding: 1rem;
align-items: center;
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 10;
}
*{
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;
z-index: 10;
}
#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>Answered by F.Igor on November 10, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP