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
Acá pasa cuando se hace el scroll
lo mismo pasa cuando hago el proceso en dispositivos móviles