1

Estoy aprendiendo HTML y CSS y estaba siguiendo un tutorial de siseño responsivo de youtube paso por paso. En este tutorial hay un menu que queda fijo al hacer scroll, el problema es que en la sección que esta debajo del menú hay una foto que al hacer scroll sube superponiendose a la barra de menú tanto en el diseño de página como en el de dispositivos mas pequeños. Lo mismo me sucede en la sección que le sigue donde hay un grid de 3 columnas y la del medio es solo una linea (este diseño es solo a partir de 950px), esa columna también se superpone al menú. revise todo lo que hice y no encuentro el error, me ayudan?

html {
    scroll-behavior: smooth;
}
body{
    font-family: "playfair display", 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding: 90px 20px 0;
    background-color: white;
    color: black;
    padding-top: 100px; 
}
a{
    text-decoration: none;
    color: black;
}

.horizontal-padding {
    padding-left: 25pt;
    padding-right: 25px;
}
.vertical-padding {
    padding-top: 25px;
    padding-bottom: 25px;

}

.footer {
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding: 15px 15px;

}

.copyright {
    font-size: 15px;
    font-weight: bold;
    margin: 20pt;
    
}

@media (min-width:950 px) {
    .horizontal-padding {
        padding-left: 70px;
        padding-right: 70px;
    }
    .vertical-padding {
        padding-top: 70px;
        padding-bottom: 70px;
    }
}

.topheader {
    
    box-shadow: 0 4px 5px; color: gray;
    height: 70px;
    position: fixed ;
    background-color:#feede9;
    left: 0;
    top: 0;
    width: 100%;

}

.topnav {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    max-width: 980px;
    margin: 0 auto;
    
}

.logo{
    display: flex;
    align-items: center
}
.logo img{
    border-radius: 50%;
}

.menu{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li{
    padding: 0 15px;
    width: max-content;

}

.menu a {
    color:black;
    font-size: 18px;
    font-weight: bold;
    line-height: 50px;
    text-transform: uppercase;

    position: relative;
    
}

.open-menu,
.close-menu {
    color: rgb(1, 0, 10);
    background: none;
    border: none;
    font-size: 30px;
    padding: 0 20px;
    

    display: none;

}

@media (max-width: 768px) {
    
    .menu{
            flex-direction: column;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            align-items: center;
            background-color: #feede9;
            color: white;
            height: 100%;
            overflow-y: auto;

            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;

        }
        
        .menu li{
            padding: 0;
        
        }
        
        .menu a {
            color: rgb(7, 7, 7);
            line-height: 60px;
            font-size: 18px;
            font-weight: 800;
            line-height: 70px;
            text-transform: uppercase;
            
        }

        .open-menu,
        .close-menu{
            display: block;
            border: none;
            background: none;
            cursor: pointer;
        }

        .close-menu{
            align-self: flex-end;
            padding: 15px 32px;
            color: black;
            
            
        }

        .menu_opened {
            opacity: 1;
            pointer-events: all;
        }
 
            

    
}

.profile-info {
    margin-bottom: 25px;
}

.profile-img {
    width: 80%;
    max-width: 350px;

}

.profile-img-section {
    position: relative;
}

.profile {
    text-align: center;
}

.profile-title {
    font-size: 35px;
    font-weight: bold;
    margin: 0;
    color: black;
}

.profile-details {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    max-width: 450px;
    margin: 20px auto;
    
}

@media (min-width: 950px) {
    .profile-info {
        margin-bottom: 0px;
    }
    
    .profile-img {
        width: 100%;
        max-width: 350px;
    
    }
    
    .profile {
        text-align: left;
        display: flex;
        justify-content: space-between;
        max-width: 980px;
        margin: 0 auto;
        align-items: center;
    }
    
    .profile-title {
        font-size: 60px;
    }
    
    .profile-details {
        font-size: 20px;
        margin: 30px 0;
        
    }

    
}

.experiences {
    display: flex;
    flex-direction: column;
}

.experiences-body {
    background-color: #feede9;
    color: black; 
   
}
.division {
    width: 100%;
    position: relative;
}

.experiences-title {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 30px;
    margin: 25px;

}

.experience-date {
   font-size: 25px;
   font-weight: bold;
   color: black;

}

.experience-description {
    font-weight: 400;
    font-size: 15px;
    margin-top: 10px;
}

.experience {
    padding: 25px;
    max-width: 500px;
    margin: 0 auto;
   
}


@media (min-width: 950px) {
    .experiences-title {
        font-size: 50px;
        margin: 35px 0;
        }
        
    .experience-date {
           font-size: 40px;
          
        } 
        
    .experience-description {
            font-size: 20;
            margin-top: 10px;
            line-height: 1.3;
        }

    .experience {
        padding: 0;
    }    

    .experience-left {
        text-align: right;
    }
    .experiences-grid {
        display: grid;
        grid-template-columns: auto 2px auto;
        gap: 20px 70px;
        padding: 70px;
        justify-content: center;
        max-width: 980px;
        margin: 0 auto;
    }    

    .line {
        background-color: black;
        position: relative;
    }
    .line::before,
    .line::after {
        content: "";
        display: block;
        width: 18px;
        height: 18px;
        background-color: black;
        border-radius: 50px;

        position: absolute;
        top: -18px;
        left: -8px;
    }
    .line::after {
        top: 100%
    }
   
}
<!DOCTYPE html>
<html lang="es">
<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">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Charm&family=Playfair+Display:ital,wght@0,400;1,400;1,500&family=Raleway:ital,wght@0,400;1,400;1,600&display=swap" rel="stylesheet">
    
    <script src="https://kit.fontawesome.com/7c4191d41b.js" crossorigin="anonymous"></script>
    <title>Paula Ramirez</title>

    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/navbar.css">
    <link rel="stylesheet" href="css/profile.css">
    <link rel="stylesheet" href="css/experience.css">
    <link rel="stylesheet" href="css/education.css">
    <link rel="stylesheet" href="css/contact.css">
    <script defer src="js/app.js"></script>
    
</head>
<body>
    <header class="topheader">
        <nav class="topnav">
            <a href="#" class="logo">
            <img height="50px" width="50px" src="images/Pr (1).jpg" alt="logo">
            </a>
            <button class="open-menu" aria-label="Abrir menú">
                <i class="fa-solid fa-bars"></i>
                
            </button>
            
            <ul class="menu">
                <button class="close-menu" aria-label="Cerrar menú">
                    <i class="fa-regular fa-x"></i>
                    
                </button>
                <li><a href="#profile" class="selected">Sobre Mí</a></li>
                <li><a href="#experience">Experiencia</a></li>
                <li><a href="#academic">Formación</a></li>
                <li><a href="#contact">Contacto</a></li>

            </ul>
        </nav>

    

    </header>

    <div class="horizontal-padding vertical-padding">
        <section class="profile">
            <div class="profile-info">
                <h1 class="profile-title">Paula Ramirez</h1>
                <p class="profile-details">
                    Licenciada en Psicología, egresada de la Universidad de Buenos Aires, con gran experiencia tanto en la práctica en consultorio privado como en distintos recursos asistenciales del servicio público de salud en el ámbito del Gran Buenos Aires. Me especializo en terapia cognitiva  conductual y mi objetivo es ayudar a los pacientes y sus familias a mejorar su calidad de vida y su salud mental.
                </p>
        
            </div>
            <span class="prfile-img-section">
                <div class="profile-img-section">
                    <img class="profile-img" src="images/pexels-edmond-dantès-4347366.jpg" alt="Psicologa">
                </div>
            </span>
        </section>
    </div>

    <section class="experiences" id="experience">
        
        <div class="experiences-body">
            <h2 class="experiences-title">Experiencia</h2>
            <div class="experiences-grid">
                <div class="empty"></div>
                <div class="line"></div>
                
                <div class="experience">
                   
                    <div class="experience-date">2020-2023</div>
                    <div class="experience-description">
                        Atención de pacientes en consultorio particular. 
                    </div>
                </div>
                

                 <div class="experience experience-left">
                    <div class="experience-date">2018-2020</div>
                    <div class="experience-description">
                        Atención de pacientes en rehabilitación de adicciones en Espacio terapéutico Amanecer.
                    </div>
                </div>
                <div class="line"></div>
                <div class="empty"></div>
                <div class="empty"></div>
                <div class="line"></div>
            
                <div class="experience">
                    <div class="experience-date">2014-2018</div>
                    <div class="experience-description">
                        Atención de niños/as con problemáticas de TGD - centro terapéutico Espacio de Vida
                    </div>
                
                </div>

                <div class="experience experience-left">
                    <div class="experience-date">2014-2017</div>
                    <div class="experience-description">
                        Atención clínica a pacientes en servicio local de niños/niñas y adolescentes de Malvinas Argentinas.  
                    </div>
                </div>
                <div class="line"></div>
                <div class="empty"></div>
                <div class="empty"></div>
                <div class="line"></div>

                <div class="experience">
                    <div class="experience-date">2008-2013</div>
                    <div class="experience-description">
                        Atención de pacientes en el área clínica- Hospital de Salud Mental de Malvinas Argentinas  
                    </div>
                </div>
                
            </div>
            <img src="images/blurry-gradient-haikei (3).svg" alt="division" class="division">
    </section>
    <div class="horizontal-padding vertical-padding">
        <section class="education">
        <div class="education-body">
            <div class="education-title">
                <h2 class="title">Formación Profesional</h2>
            </div>
            <div class="education-description">
                <ul>
                    <li>Licenciada en Psicología - UBA</li>
                    <li>Doctoranda en Psicología - UBA</li>
                    <li>Maestría en Psicología Cognitiva –UBA</li>
                    <li>DIPLOMATURA EN TRASTORNO POR DÉFICIT DE ATENCIÓN. DE LA INFANCIA A LA ADULTEZ – Universidad Favaloro</li>
                    <li>Especialización en Autismo y TEA - UTN</li>
                    <li>Clínica Psicoanalítica de los Consumos Problemáticos – USAM</li>
                </ul>
            </div>
        </div>
        </section>
    </div>

    <section class="contact">
        <div class="contact-body">
            
            <h2 class="contact-title">Contacto</h2>
            <div class="contact-info">
                <ul class="info-items">
             
                <li class="item"><i class="fa-solid fa-mobile"></i>1563022589</li>
                <li class="item"><i class="fa-solid fa-envelope"></i>[email protected]</li>
            </ul>
            </div>
        </div>
    </section>

    <footer>
        <div class="footer">
            <p class="copyright"> copyright © 2023 Mar Design</p>
        </div>
    </footer>
    

 
    
    
</body>
</html>

0

2 respuestas 2

0

Solamente tendrías que ingresar a la clase .topheader y darle la propiedad z-index: 1000 para que el elemento esté siempre encima del todo, así evitarías el problema de tus imágenes:

.topheader {
  box-shadow: 0 4px 5px; color: gray;
  height: 70px;
  position: fixed ;
  background-color:#feede9;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
}

Código completo:

html {
  scroll-behavior: smooth;
}
body{
  font-family: "playfair display", 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 90px 20px 0;
  background-color: white;
  color: black;
  padding-top: 100px; 
}
a{
  text-decoration: none;
  color: black;
}

.horizontal-padding {
  padding-left: 25pt;
  padding-right: 25px;
}
.vertical-padding {
  padding-top: 25px;
  padding-bottom: 25px;

}

.footer {
  display: flex;
  width: 100%;
  justify-content: space-around;
  padding: 15px 15px;

}

.copyright {
  font-size: 15px;
  font-weight: bold;
  margin: 20pt;

}

@media (min-width:950 px) {
  .horizontal-padding {
    padding-left: 70px;
    padding-right: 70px;
  }
  .vertical-padding {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

.topheader {
  box-shadow: 0 4px 5px; color: gray;
  height: 70px;
  position: fixed ;
  background-color:#feede9;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.topnav {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  max-width: 980px;
  margin: 0 auto;

}

.logo{
  display: flex;
  align-items: center
}
.logo img{
  border-radius: 50%;
}

.menu{
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li{
  padding: 0 15px;
  width: max-content;

}

.menu a {
  color:black;
  font-size: 18px;
  font-weight: bold;
  line-height: 50px;
  text-transform: uppercase;

  position: relative;

}

.open-menu,
.close-menu {
  color: rgb(1, 0, 10);
  background: none;
  border: none;
  font-size: 30px;
  padding: 0 20px;


  display: none;

}

@media (max-width: 768px) {

  .menu{
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    align-items: center;
    background-color: #feede9;
    color: white;
    height: 100%;
    overflow-y: auto;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;

  }

  .menu li{
    padding: 0;

  }

  .menu a {
    color: rgb(7, 7, 7);
    line-height: 60px;
    font-size: 18px;
    font-weight: 800;
    line-height: 70px;
    text-transform: uppercase;

  }

  .open-menu,
  .close-menu{
    display: block;
    border: none;
    background: none;
    cursor: pointer;
  }

  .close-menu{
    align-self: flex-end;
    padding: 15px 32px;
    color: black;


  }

  .menu_opened {
    opacity: 1;
    pointer-events: all;
  }




}

.profile-info {
  margin-bottom: 25px;
}

.profile-img {
  width: 80%;
  max-width: 350px;

}

.profile-img-section {
  position: relative;
}

.profile {
  text-align: center;
}

.profile-title {
  font-size: 35px;
  font-weight: bold;
  margin: 0;
  color: black;
}

.profile-details {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  max-width: 450px;
  margin: 20px auto;

}

@media (min-width: 950px) {
  .profile-info {
    margin-bottom: 0px;
  }

  .profile-img {
    width: 100%;
    max-width: 350px;

  }

  .profile {
    text-align: left;
    display: flex;
    justify-content: space-between;
    max-width: 980px;
    margin: 0 auto;
    align-items: center;
  }

  .profile-title {
    font-size: 60px;
  }

  .profile-details {
    font-size: 20px;
    margin: 30px 0;

  }


}

.experiences {
  display: flex;
  flex-direction: column;
}

.experiences-body {
  background-color: #feede9;
  color: black; 

}
.division {
  width: 100%;
  position: relative;
}

.experiences-title {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 30px;
  margin: 25px;

}

.experience-date {
  font-size: 25px;
  font-weight: bold;
  color: black;

}

.experience-description {
  font-weight: 400;
  font-size: 15px;
  margin-top: 10px;
}

.experience {
  padding: 25px;
  max-width: 500px;
  margin: 0 auto;

}


@media (min-width: 950px) {
  .experiences-title {
    font-size: 50px;
    margin: 35px 0;
  }

  .experience-date {
    font-size: 40px;

  } 

  .experience-description {
    font-size: 20;
    margin-top: 10px;
    line-height: 1.3;
  }

  .experience {
    padding: 0;
  }    

  .experience-left {
    text-align: right;
  }
  .experiences-grid {
    display: grid;
    grid-template-columns: auto 2px auto;
    gap: 20px 70px;
    padding: 70px;
    justify-content: center;
    max-width: 980px;
    margin: 0 auto;
  }    

  .line {
    backgr
<!DOCTYPE html>
<html lang="es">
  <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">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Charm&family=Playfair+Display:ital,wght@0,400;1,400;1,500&family=Raleway:ital,wght@0,400;1,400;1,600&display=swap" rel="stylesheet">

    <script src="https://kit.fontawesome.com/7c4191d41b.js" crossorigin="anonymous"></script>
    <title>Paula Ramirez</title>

    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/navbar.css">
    <link rel="stylesheet" href="css/profile.css">
    <link rel="stylesheet" href="css/experience.css">
    <link rel="stylesheet" href="css/education.css">
    <link rel="stylesheet" href="css/contact.css">
    <script defer src="js/app.js"></script>

  </head>
  <body>
    <header class="topheader">
      <nav class="topnav">
        <a href="#" class="logo">
          <img height="50px" width="50px" src="images/Pr (1).jpg" alt="logo">
        </a>
        <button class="open-menu" aria-label="Abrir menú">
          <i class="fa-solid fa-bars"></i>

        </button>

        <ul class="menu">
          <button class="close-menu" aria-label="Cerrar menú">
            <i class="fa-regular fa-x"></i>

          </button>
          <li><a href="#profile" class="selected">Sobre Mí</a></li>
          <li><a href="#experience">Experiencia</a></li>
          <li><a href="#academic">Formación</a></li>
          <li><a href="#contact">Contacto</a></li>

        </ul>
      </nav>



    </header>

    <div class="horizontal-padding vertical-padding">
      <section class="profile">
        <div class="profile-info">
          <h1 class="profile-title">Paula Ramirez</h1>
          <p class="profile-details">
            Licenciada en Psicología, egresada de la Universidad de Buenos Aires, con gran experiencia tanto en la práctica en consultorio privado como en distintos recursos asistenciales del servicio público de salud en el ámbito del Gran Buenos Aires. Me especializo en terapia cognitiva  conductual y mi objetivo es ayudar a los pacientes y sus familias a mejorar su calidad de vida y su salud mental.
          </p>

        </div>
        <span class="prfile-img-section">
          <div class="profile-img-section">
            <img class="profile-img" src="images/pexels-edmond-dantès-4347366.jpg" alt="Psicologa">
          </div>
        </span>
      </section>
    </div>

    <section class="experiences" id="experience">

      <div class="experiences-body">
        <h2 class="experiences-title">Experiencia</h2>
        <div class="experiences-grid">
          <div class="empty"></div>
          <div class="line"></div>

          <div class="experience">

            <div class="experience-date">2020-2023</div>
            <div class="experience-description">
              Atención de pacientes en consultorio particular. 
            </div>
          </div>


          <div class="experience experience-left">
            <div class="experience-date">2018-2020</div>
            <div class="experience-description">
              Atención de pacientes en rehabilitación de adicciones en Espacio terapéutico Amanecer.
            </div>
          </div>
          <div class="line"></div>
          <div class="empty"></div>
          <div class="empty"></div>
          <div class="line"></div>

          <div class="experience">
            <div class="experience-date">2014-2018</div>
            <div class="experience-description">
              Atención de niños/as con problemáticas de TGD - centro terapéutico Espacio de Vida
            </div>

          </div>

          <div class="experience experience-left">
            <div class="experience-date">2014-2017</div>
            <div class="experience-description">
              Atención clínica a pacientes en servicio local de niños/niñas y adolescentes de Malvinas Argentinas.  
            </div>
          </div>
          <div class="line"></div>
          <div class="empty"></div>
          <div class="empty"></div>
          <div class="line"></div>

          <div class="experience">
            <div class="experience-date">2008-2013</div>
            <div class="experience-description">
              Atención de pacientes en el área clínica- Hospital de Salud Mental de Malvinas Argentinas  
            </div>
          </div>

        </div>
        <img src="images/blurry-gradient-haikei (3).svg" alt="division" class="division">
        </section>
      <div class="horizontal-padding vertical-padding">
        <section class="education">
          <div class="education-body">
            <div class="education-title">
              <h2 class="title">Formación Profesional</h2>
            </div>
            <div class="education-description">
              <ul>
                <li>Licenciada en Psicología - UBA</li>
                <li>Doctoranda en Psicología - UBA</li>
                <li>Maestría en Psicología Cognitiva –UBA</li>
                <li>DIPLOMATURA EN TRASTORNO POR DÉFICIT DE ATENCIÓN. DE LA INFANCIA A LA ADULTEZ – Universidad Favaloro</li>
                <li>Especialización en Autismo y TEA - UTN</li>
                <li>Clínica Psicoanalítica de los Consumos Problemáticos – USAM</li>
              </ul>
            </div>
          </div>
        </section>
      </div>

      <section class="contact">
        <div class="contact-body">

          <h2 class="contact-title">Contacto</h2>
          <div class="contact-info">
            <ul class="info-items">

              <li class="item"><i class="fa-solid fa-mobile"></i>1563022589</li>
              <li class="item"><i class="fa-solid fa-envelope"></i>[email protected]</li>
            </ul>
          </div>
        </div>
      </section>

      <footer>
        <div class="footer">
          <p class="copyright"> copyright © 2023 Mar Design</p>
        </div>
      </footer>
      </body>
    </html>

0

Con añadirle a la clase topheader la propiedad z-index con un valor algo alto como 100. Esto hará que se superponga la cabecera al resto de elementos

1
  • Gracias, creo que el tutorial se saltó esa parte.
    – Mar Ce
    Commented el 2 feb. 2023 a las 19:48

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.