0

Tengo dos contenidos div, pero resulta que cuando realizo el scroll se sobrepone un div encima del otro, ¿cómo hago para que esto no me suceda?

Este es el código 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" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>TECNICAR</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css" />
    <script
      src="https://kit.fontawesome.com/7e5b2d153f.js"
      crossorigin="anonymous"
    ></script>
    <script defer src="javascript/index.js"></script>
  </head>
  <body>
    <header class="header">
      
      <nav class="nav">
        <a href="#" class="logo nav-link">
          <img src="Img/logo.png" alt="logo" class="responsive">
        </a>
        <button class="nav-toggle" aria-label="Abrir menú">
          <i class="fas fa-bars"></i>
        </button>
        <ul class="nav-menu">
          <li class="nav-menu-item">
            <a href="#" class="nav-menu-link nav-link">Blog</a>
          </li>
          <li class="nav-menu-item">
            <a href="#" class="nav-menu-link nav-link">Videos</a>
          </li>
          <li class="nav-menu-item">
            <a href="#" class="nav-menu-link nav-link">Sobre mí</a>
          </li>
          <li class="nav-menu-item">
            <a href="#" class="nav-menu-link nav-link nav-menu-link_active"
              >Contacto</a
            >
          </li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Responsive Navbar</h1>
      <div class="contenedor">
        <div class="slider-contenedor">
            <section class="contenido-slider">
              
                <img src="Img/banner.jpeg" alt="">
  
            </section>
            <section class="contenido-slider">
              
                <img src="Img/taller1.jpeg" alt="">
  
            </section>
        <section class="contenido-slider">
            <div>
             
            <img src="Img/animacion3.svg" alt="">
  
        </section>
        <section class="contenido-slider">
          
            <img src="Img/banner.jpeg" alt="">
  
        </section>
    </div>
    </div>
    <div class="contenedor">
      <div class="slider-contenedor">
          <section class="contenido-slider">
            
              <img src="Img/banner.jpeg" alt="">

          </section>
          <section class="contenido-slider">
            
              <img src="Img/taller1.jpeg" alt="">

          </section>
      <section class="contenido-slider">
          <div>
           
          <img src="Img/animacion3.svg" alt="">

      </section>
      <section class="contenido-slider">
        
          <img src="Img/banner.jpeg" alt="">

      </section>
  </div>
  </div>
    </main>


    
  </body>
</html>  

y este es el CSS que utilizo para maquetar los div

 * margin: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  padding: 90px 20px 0;
  background: #f2f2f2;
}

.header {
  background-color: #f7f6f3;
  height: 80px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

.nav {
  display: flex;
  justify-content: space-between;
  max-width: 992px;
  margin: 0 auto;
  position: fixed;  
  z-index: 0;
  top: 0;
  width: 100%;
  max-width: 1000px;
 
}

.nav-link {
  color: black;
  text-decoration: none;
}

.logo {
 
  top:0; 
    left:0; 
  font-weight: bold;  
  line-height: 100px;
  padding:10px 0; 
}
.responsive {
  max-width: 100%;
  width: 90px;
  
}

.nav-menu {
  display: flex;
  margin-right: 40px;
  list-style: none;
}

.nav-menu-item {
  font-size: 18px;
  margin: 0 10px;
  line-height: 80px;
  text-transform: uppercase;
  width: max-content;
}

.nav-menu-link {
  padding: 8px 12px;
  border-radius: 3px;
}

.nav-menu-link:hover,
.nav-menu-link_active {
  background-color: #fff200;
  transition: 0.5s;
}


.nav-toggle {
  color: white;
  background: none;
  border: none;
  font-size: 30px;
  padding: 0 20px;
  line-height: 60px;
  cursor: pointer;

  display: none;
}
/* scc del slider */
.contenedor{
  width: 100%;
  overflow: hidden;
  position: relative;
  
}
.slider-contenedor{
  width: 100%;
  display: flex;
  position: relative
  
  
}
.contenido-slider
{
  position: relative;
  top: 60px;
  width: 100%;  
  height: 600px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-shrink: 0;
}
.contenido-slider:nth-child(1){
  background: #332863;
}
.contenido-slider:nth-child(3){
  background: #611a68;
}

.contenido-slider > img
{
  width: 400px;
}

@media (max-width: 768px) {
  body {
    padding-top: 70px;
  }

  .header {
    height: 60px;
  }

  .logo {
    font-size: 25px;
    padding: 0 20px;
    line-height: 60px;
  }

  .nav-menu {
    flex-direction: column;
    align-items: center;
    margin: 0;
    background-color: #2c3e50;
    position: fixed;
    top: 60px;
    width: 100%;
    padding: 20px 0;

    height: calc(100% - 60px);
    overflow-y: auto;

    left: 100%;
    transition: left 0.3s;
  }

  .nav-menu-item {
    line-height: 70px;
  }

  .nav-menu-link:hover,
  .nav-menu-link_active {
    background: none;
    color: #83c5f7;
  }

  .nav-toggle {
    display: block;
  }

  .nav-menu_visible {
    left: 0;
  }
  .contenedor_oculta
  {
    display: none;
  }
  .nav-toggle:focus:not(:focus-visible) {
    outline: none;
  }
}
@media screen and (max-width:900px){
  .contenido-slider > img{
      width: 250px;
  }

  .contenido-slider > div{
      width: 40%;
  }

  .contenido-slider h2{
      font-size: 23px;
  }
}


@media screen and (max-width:600px){
  .contenido-slider{
     flex-direction: column-reverse;
  }

  .contenido-slider > div{
      width: 80%;
  }

}

este es el resultado cuando carga la página, aparentemente carga normal

imagen de carga de mi html

Acá pasa cuando se hace el scroll

despues del scroll

lo mismo pasa cuando hago el proceso en dispositivos móviles

1 respuesta 1

0

Aunque no se ve la primera imagen entiendo que se te ocult la barra de navegación.
Es fácil añade a la clase header un z-index:1000 o un número alto para que quede por encima de todo lo demás.

1
  • gracias si era eso
    – Oscar2017
    el 30 jul. 2021 a las 20:17

Tu Respuesta

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

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