1

resulta que estoy creando un portafolio desde 0 y me encuentro complicado con algo que no me deja avanzar. La cosa es que tengo un header donde tengo el típico menu de navegación y un banner con un texto en el centro

introducir la descripción de la imagen aquí

La cosa es que cuando pongo la página en modo responsivo (1024px) puedo seguir viendo el texto del banner por sobre el menú de navegación para celulares

introducir la descripción de la imagen aquí

y no debería ser así ya que ese texto tiene que estar detrás del menú y no por arriba como aparece en la imagen. El div que contiene el texto "Hola, yo soy desarrollador de software" tiene posición absoluta... Me gustaría aclarar que en ninguna parte tengo un z-index...

Mi HTML

<body>
<header class="header">
    <nav class="nav">
        <a href="#" class="logo">Portafolio</a>
        <button class="nav-toggle">
            <i class="fas fa-bars"></i>
        </button>
        <ul class="nav-menu">
            <li class="nav-menu-item"><a href="#header" class="nav-menu-link">Inicio</a></li>
            <li class="nav-menu-item"><a href="#about" class="nav-menu-link">Sobre Mí</a></li>
            <li class="nav-menu-item"><a href="#skills" class="nav-menu-link">Habilidades</a></li>
            <li class="nav-menu-item"><a href="#knowledge" class="nav-menu-link">Conocimientos</a></li>
            <li class="nav-menu-item"><a href="#works" class="nav-menu-link">Proyectos</a></li>
            <li class="nav-menu-item"><a href="#contact" class="nav-menu-link">Contacto</a></li>
        </ul>
    </nav>
</header>
<section class="banner">
    <div class="banner-text">
        <p>Hola, yo soy</p>
        <ul>
            <li>Diego Donoso</li>
            <li>Desarrollador de Software</li>
            <li>Técnico Analista Programador</li>
        </ul>
    </div>
</section>
</body>

Mi CSS con los selectores y clases de header y nav

.header{
background-color: #0000003f; /*color del header*/
backdrop-filter: blur(0.8rem); /*transparencia del color*/
height: 80px; /*altura del header*/
position: fixed; /*fijamos header a la pantalla*/
width: 100%; /*ancho del 100% del header*/
top: 0;
left: 0;
}

.header .nav{
display: flex; /*formato flex*/
justify-content: space-between; /*separamos los elementos del nav*/
max-width: 1200px; /*ancho del nav con límite para pantallas grandes*/
margin: 0 auto; /*centramos los elementos del nav*/
}

.header .nav .logo{
font-size: 1.875em; /*30px tamaño letra*/
font-weight: bold; /*grosor letra*/
padding: 0 2.500em; /*40px de ancho*/
line-height: 80px; /*alto de linea, logo centrado en el header*/
text-decoration: none; /*quitamos la linea debajo del logo*/
color: white; /*color del logo*/
}

.header .nav .nav-toggle{
color: white; /*color de rayas del menu*/
background: none; /*quitamos el background*/
border: none; /*quitamos los bordes del botón menu*/
font-size: 1.875em; /*30px tamaño letra*/
padding: 0 1.250em; /*relleno de 20px a los lados*/ 
line-height: 60px; /*alto de linea, menu centrado en el header versión movil*/
cursor: pointer; /*hacemos el boton clickeable*/
display: none; /*lo ocultamos en modo escritorio*/
}

.header .nav .nav-menu{
display: flex; /*formato flex*/
margin-right: 2.500em; /*distancia de elementos y margen derecho*/
list-style: none; /*quitamos los puntos de los elementos*/
}

.header .nav .nav-menu .nav-menu-item{
font-size: 1.125em; /*18px tamaño elementos del nav*/
margin: 0 0.625em; /*10px de margen entre cada elemento del nav*/
line-height: 80px; /*alto de linea, elementos centrados en el header*/
text-transform: uppercase; /*texto en mayusculas*/
width: max-content; /*los elementos se muestran hacia el lado y no hay salto de linea por palabra*/
}

.header .nav .nav-menu .nav-menu-item a{
color: white; /*color blanco los elementos del nav-menu*/
text-decoration: none; /*quitamos la linea debajo de cada elemento*/
padding: 0.500em 0.750em; /*relleno de 8px arriba abajo y 12 a los lados*/
border-radius: 3px; /*borde del padding/relleno*/
}

Selectores y clases de banner y banner-text

.banner{
background-image: url(../images/banner1.webp) ; /*imagen de fondo banner*/
background-size: cover; /*la imagen se expande a la pantalla*/
min-height: 100vh;/*altura del 100 del viewport del dispositivo*/
background-color: rgb(30, 30, 30); /*color de fondo*/
background-blend-mode: soft-light; /*propiedad de color*/
animation: banner 25s infinite linear; /*animación que llama a banner, 25seg, infinito */
}
.banner .banner-text{
width: 100%;
height: 80px;
font-weight: bold;
color: white;
display: flex;
justify-content: center;
line-height:80px;
font-size: 60px;
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
overflow: hidden;
}

.banner .banner-text ul{
color: #ff9800;
padding-left: 10px;
list-style: none; /*quitamos los puntos de la lista*/
animation: change-banner-text-ul 6s infinite;
}

Y acá estan las mismas clases de arriba pero en la media query de 1024px

@media (max-width: 1024px){
.header{
    height: 60px; /*achicamos el largo del header*/
}
.header .nav .logo{
    font-size: 1.563em; /*25px tamaño letra*/
    padding: 0 1.250em; /*20px de ancho*/
    line-height: 60px; /*alto de linea, logo centrado en el header*/
}
.header .nav .nav-menu{
    flex-direction: column; /*elementos del nav uno arriba de otro*/
    align-items: center; /*centramos los elementos*/
    background-color: #2c3e50; /*color del nav-menu*/
    position: fixed;
    left: 0;
    top: 60px; /*posicion de 60px para que se vea el header*/
    width: 100%; /*ancho del nav-menu*/
    height: calc(100vh - 60px); /*100% - altura del nav-menu*/
    overflow-y: auto; /*cada vez que se necesite el scroll/ruedita lo añadirá*/
    padding: 1.250em 0; /*relleno arriba y abajo 20px 0 a los lados*/
    left: 100%;
    transition: left 0.3s;
}
.header .nav .nav-menu .nav-menu-item{
    line-height: 70px;
}
.header .nav .nav-menu .nav-menu-item a:hover{
    background: none;
    color: #83c5f7;
}
.header .nav .nav-toggle{
    display: block;
}
.header .nav .nav-menu_visible{
    left: 0; /*hacemos que el menu sea visible*/
}
.banner{
    background-position:center; /*posición de imagen de fondo*/
}
.banner .banner-text{
    font-size: 48px;
}
.banner .banner-text ul{
    padding-left: 10px;
}
}

He perdido todo el día tratando de solucionarlo por las mías y no he podido... Probé dándole a la clase de la media query .header .nav .nav-menu un z-index de número alto y en .banner-text un z-index de número menor esperando que se respetara la posición pero tampoco lo pude lograr :/ ya no sé que hacer.

2 respuestas 2

2

.header{
background-color: #0000003f; /*color del header*/
backdrop-filter: blur(0.8rem); /*transparencia del color*/
height: 80px; /*altura del header*/
position: fixed; /*fijamos header a la pantalla*/
width: 100%; /*ancho del 100% del header*/
top: 0;
left: 0;
}

.header .nav{
display: flex; /*formato flex*/
justify-content: space-between; /*separamos los elementos del nav*/
max-width: 1200px; /*ancho del nav con límite para pantallas grandes*/
margin: 0 auto; /*centramos los elementos del nav*/
}

.header .nav .logo{
font-size: 1.875em; /*30px tamaño letra*/
font-weight: bold; /*grosor letra*/
padding: 0 2.500em; /*40px de ancho*/
line-height: 80px; /*alto de linea, logo centrado en el header*/
text-decoration: none; /*quitamos la linea debajo del logo*/
color: white; /*color del logo*/
}

.header .nav .nav-toggle{
color: white; /*color de rayas del menu*/
background: none; /*quitamos el background*/
border: none; /*quitamos los bordes del botón menu*/
font-size: 1.875em; /*30px tamaño letra*/
padding: 0 1.250em; /*relleno de 20px a los lados*/ 
line-height: 60px; /*alto de linea, menu centrado en el header versión movil*/
cursor: pointer; /*hacemos el boton clickeable*/
display: none; /*lo ocultamos en modo escritorio*/
}

.header .nav .nav-menu{
display: flex; /*formato flex*/
margin-right: 2.500em; /*distancia de elementos y margen derecho*/
list-style: none; /*quitamos los puntos de los elementos*/
}

.header .nav .nav-menu .nav-menu-item{
font-size: 1.125em; /*18px tamaño elementos del nav*/
margin: 0 0.625em; /*10px de margen entre cada elemento del nav*/
line-height: 80px; /*alto de linea, elementos centrados en el header*/
text-transform: uppercase; /*texto en mayusculas*/
width: max-content; /*los elementos se muestran hacia el lado y no hay salto de linea por palabra*/
}

.header .nav .nav-menu .nav-menu-item a{
color: white; /*color blanco los elementos del nav-menu*/
text-decoration: none; /*quitamos la linea debajo de cada elemento*/
padding: 0.500em 0.750em; /*relleno de 8px arriba abajo y 12 a los lados*/
border-radius: 3px; /*borde del padding/relleno*/
}

.banner{
background-image: url(../images/banner1.webp) ; /*imagen de fondo banner*/
background-size: cover; /*la imagen se expande a la pantalla*/
min-height: 100vh;/*altura del 100 del viewport del dispositivo*/
background-color: rgb(30, 30, 30); /*color de fondo*/
background-blend-mode: soft-light; /*propiedad de color*/
animation: banner 25s infinite linear; /*animación que llama a banner, 25seg, infinito */
}
.banner .banner-text{
width: 100%;
height: 80px;
font-weight: bold;
color: white;
display: flex;
justify-content: center;
line-height:80px;
font-size: 60px;
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
overflow: hidden;
}

.banner .banner-text ul{
color: #ff9800;
padding-left: 10px;
list-style: none; /*quitamos los puntos de la lista*/
animation: change-banner-text-ul 6s infinite;
}

@media (max-width: 1024px){
.header{
    height: 60px; /*achicamos el largo del header*/
}
.header .nav .logo{
    font-size: 1.563em; /*25px tamaño letra*/
    padding: 0 1.250em; /*20px de ancho*/
    line-height: 60px; /*alto de linea, logo centrado en el header*/
}
.header .nav .nav-menu{
    flex-direction: column; /*elementos del nav uno arriba de otro*/
    align-items: center; /*centramos los elementos*/
    background-color: #2c3e50; /*color del nav-menu*/
    position: fixed;
    left: 0;
    top: 60px; /*posicion de 60px para que se vea el header*/
    width: 100%; /*ancho del nav-menu*/
    height: calc(100vh - 60px); /*100% - altura del nav-menu*/
    overflow-y: auto; /*cada vez que se necesite el scroll/ruedita lo añadirá*/
    padding: 1.250em 0; /*relleno arriba y abajo 20px 0 a los lados*/
    left: 100%;
    transition: left 0.3s;
}
.header .nav .nav-menu .nav-menu-item{
    line-height: 70px;
}
.header .nav .nav-menu .nav-menu-item a:hover{
    background: none;
    color: #83c5f7;
}
.header .nav .nav-toggle{
    display: block;
}
.header .nav .nav-menu_visible{
    left: 0; /*hacemos que el menu sea visible*/
}
.banner{
    background-position:center; /*posición de imagen de fondo*/
}
.banner .banner-text{
    font-size: 48px;
}
.banner .banner-text ul{
    padding-left: 10px;
}
}
<html>
<body>
<header class="header">
    <nav class="nav">
        <a href="#" class="logo">Portafolio</a>
        <button class="nav-toggle">
            <i class="fas fa-bars"></i>
        </button>
        <ul class="nav-menu">
            <li class="nav-menu-item"><a href="#header" class="nav-menu-link">Inicio</a></li>
            <li class="nav-menu-item"><a href="#about" class="nav-menu-link">Sobre Mí</a></li>
            <li class="nav-menu-item"><a href="#skills" class="nav-menu-link">Habilidades</a></li>
            <li class="nav-menu-item"><a href="#knowledge" class="nav-menu-link">Conocimientos</a></li>
            <li class="nav-menu-item"><a href="#works" class="nav-menu-link">Proyectos</a></li>
            <li class="nav-menu-item"><a href="#contact" class="nav-menu-link">Contacto</a></li>
        </ul>
    </nav>
</header>
<section class="banner">
    <div class="banner-text">
        <p>Hola, yo soy</p>
        <ul>
            <li>Diego Donoso</li>
            <li>Desarrollador de Software</li>
            <li>Técnico Analista Programador</li>
        </ul>
    </div>
</section>
</body>
</html>

@media (max-width: 1024px){
.header{
    z-index: 4;
    height: 60px; /*achicamos el largo del header*/
}
}
<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .header{
background-color: #0000003f; /*color del header*/
backdrop-filter: blur(0.8rem); /*transparencia del color*/
height: 80px; /*altura del header*/
position: fixed; /*fijamos header a la pantalla*/
width: 100%; /*ancho del 100% del header*/
top: 0;
left: 0;
}

.header .nav{
display: flex; /*formato flex*/
justify-content: space-between; /*separamos los elementos del nav*/
max-width: 1200px; /*ancho del nav con límite para pantallas grandes*/
margin: 0 auto; /*centramos los elementos del nav*/
}

.header .nav .logo{
font-size: 1.875em; /*30px tamaño letra*/
font-weight: bold; /*grosor letra*/
padding: 0 2.500em; /*40px de ancho*/
line-height: 80px; /*alto de linea, logo centrado en el header*/
text-decoration: none; /*quitamos la linea debajo del logo*/
color: white; /*color del logo*/
}

.header .nav .nav-toggle{
color: white; /*color de rayas del menu*/
background: none; /*quitamos el background*/
border: none; /*quitamos los bordes del botón menu*/
font-size: 1.875em; /*30px tamaño letra*/
padding: 0 1.250em; /*relleno de 20px a los lados*/ 
line-height: 60px; /*alto de linea, menu centrado en el header versión movil*/
cursor: pointer; /*hacemos el boton clickeable*/
display: none; /*lo ocultamos en modo escritorio*/
}

.header .nav .nav-menu{
display: flex; /*formato flex*/
margin-right: 2.500em; /*distancia de elementos y margen derecho*/
list-style: none; /*quitamos los puntos de los elementos*/
}

.header .nav .nav-menu .nav-menu-item{
font-size: 1.125em; /*18px tamaño elementos del nav*/
margin: 0 0.625em; /*10px de margen entre cada elemento del nav*/
line-height: 80px; /*alto de linea, elementos centrados en el header*/
text-transform: uppercase; /*texto en mayusculas*/
width: max-content; /*los elementos se muestran hacia el lado y no hay salto de linea por palabra*/
}

.header .nav .nav-menu .nav-menu-item a{
color: white; /*color blanco los elementos del nav-menu*/
text-decoration: none; /*quitamos la linea debajo de cada elemento*/
padding: 0.500em 0.750em; /*relleno de 8px arriba abajo y 12 a los lados*/
border-radius: 3px; /*borde del padding/relleno*/
}

.banner{
background-image: url(../images/banner1.webp) ; /*imagen de fondo banner*/
background-size: cover; /*la imagen se expande a la pantalla*/
min-height: 100vh;/*altura del 100 del viewport del dispositivo*/
background-color: rgb(30, 30, 30); /*color de fondo*/
background-blend-mode: soft-light; /*propiedad de color*/
animation: banner 25s infinite linear; /*animación que llama a banner, 25seg, infinito */
}
.banner .banner-text{
width: 100%;
height: 110px;
font-weight: bold;
color: white;
display: flex;
justify-content: center;
font-size: 60px;
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
overflow: hidden;
}

.banner .banner-text ul{
color: #ff9800;
padding-left: 10px;
list-style: none; /*quitamos los puntos de la lista*/
animation: change-banner-text-ul 6s infinite;
}
@media (max-width: 1024px){
.header .nav .logo{
    font-size: 1.563em; /*25px tamaño letra*/
    padding: 0 1.250em; /*20px de ancho*/
    line-height: 60px; /*alto de linea, logo centrado en el header*/
}
.header .nav .nav-menu.active{
    left: 0 !important;
}
.header .nav .nav-menu{
    flex-direction: column; /*elementos del nav uno arriba de otro*/
    align-items: center; /*centramos los elementos*/
    background-color: #2c3e50; /*color del nav-menu*/
    position: fixed;
    top: 60px; /*posicion de 60px para que se vea el header*/
    width: 100%; /*ancho del nav-menu*/
    height: calc(100vh - 60px); /*100% - altura del nav-menu*/
    overflow-y: auto; /*cada vez que se necesite el scroll/ruedita lo añadirá*/
    padding: 1.250em 0; /*relleno arriba y abajo 20px 0 a los lados*/
    left: 100%;
    transition: left 0.3s;
}
.header .nav .nav-menu.active{
    left: 0 !important;
}
.header .nav .nav-menu .nav-menu-item{
    line-height: 70px;
}
.header .nav .nav-menu .nav-menu-item a:hover{
    background: none;
    color: #83c5f7;
}
.header .nav .nav-toggle{
    display: block;
}
.header .nav .nav-menu_visible{
    left: 0; /*hacemos que el menu sea visible*/
}
.banner{
    background-position:center; /*posición de imagen de fondo*/
}
.banner .banner-text{
    font-size: 48px;
}
.banner .banner-text ul{
    padding-left: 10px;
}
}

    </style>
</head>
<body>
    
    <header class="header">
        <nav class="nav">
            <a href="#" class="logo">Portafolio</a>
            <button id="nav-toggle" class="nav-toggle" >
                <i class="fas fa-bars"></i>
            </button>
            <ul class="nav-menu" id="menu">
                <li class="nav-menu-item"><a href="#header" class="nav-menu-link">Inicio</a></li>
                <li class="nav-menu-item"><a href="#about" class="nav-menu-link">Sobre Mí</a></li>
                <li class="nav-menu-item"><a href="#skills" class="nav-menu-link">Habilidades</a></li>
                <li class="nav-menu-item"><a href="#knowledge" class="nav-menu-link">Conocimientos</a></li>
                <li class="nav-menu-item"><a href="#works" class="nav-menu-link">Proyectos</a></li>
                <li class="nav-menu-item"><a href="#contact" class="nav-menu-link">Contacto</a></li>
            </ul>
        </nav>
    </header>
    <section class="banner">
        <div class="banner-text">
            <p>Hola, yo soy</p>
            <ul>
                <li>Diego Donoso</li>
                <li>Desarrollador de Software</li>
                <li>Técnico Analista Programador</li>
            </ul>
        </div>
    </section>

    <script>

        document.getElementById("nav-toggle").addEventListener("click", myFunction);

        function myFunction() {
            var menu = document.getElementById("menu")
            var toggle = document.getElementById("nav-toggle")
            menu.classList.toggle("active")
            toggle.classList.toggle("active")        
        }

        
    </script>

</body>
</html>

Solo debes agregar un z-index al menú que sea mayor que todos los elementos ejemplo .header{ ..... z-index:4 .... }

Te subo el ejemplo para que veas como se arregla estoy por el móvil y no me deja utilizar la herramienta de Desarrollo

Respuesta en edición

1
  • La primera es como la tienes implementado y la segunda es con agregar solo el z-index
    – roldos
    Commented el 10 sept. 2021 a las 20:48
0

Responderé en dependencia a lo que entendí, quieres que un elemento se quede detrás de otro ¿cierto?, Bueno hay una forma más simple de ubicar elementos unos delante de otros, y es simplemente según el orden de los tag en el HTML. Ejemplo:

<p style="backgroud:red; position:absolute; top:0">Texto 1</p>
<p style="background:blue; position:absolute; top:0">Texto 2</p>

Estas dos etiquetas están una encima de la otra, por supuesto, el texto 2 va a estar SIEMPRE por delante del texto 1 pase lo que pase ya que está debajo en el código HTML, para que el texto 1 este delante, simplemente lo acomodamos

<p style="background:blue; position:absolute; top:0">Texto 2</p>
<p style="backgroud:red; position:absolute; top:0">Texto 1</p>

Ahora sí aparecerá encima del texto 2, debes hacer algo similar en tu código, acomodar las etiquetas de tal manera, que estén delante.

1
  • Otra alternativa diferente a la que te acabo de decir, sería usar JavaScript para que cuando hagas click en tu <nav>, el texto desaparezca, es una medida un poco rústica, pero útil en determinados casos. Commented el 10 sept. 2021 a las 6:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.