Cuando tengo varios div con una posición fija, el primer div se superpone al segundo div mientras está al final y no permanece bloqueado en la posición sin superponerse. ¿Cómo hago para que se bloquee en una posición cuando termina el div correspondiente?
Aquí hay un copepen para eso
html:
<main class="main-container"> <header class="main-header">HEADER</header> <div class="main-header">MAIN CONTENT</div> <footer class="main-footer">FOOTER</footer> </main>CSS
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; } .main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;} .main-container *{padding:10px;background:#aaa; border:dashed 5px #000;} .main-container * + *{margin-top:20px;} .main-header{ height:50px; background:#aaa; border-color:red; } .main-content{ min-height:1000px; } .main-header{position:-webkit-sticky; position:sticky; top:0;}Problema original en el sitio web
Primero calcule la altura del primer elemento, es decir ( 80px , incluido el borde y los rellenos) en su caso.
Dale 80px arriba al segundo elemento.
El tercer elemento tendrá una parte superior de 160px y así sucesivamente.
Todos los elementos tendrán position:sticky
Prueba esto,
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; height:1000px} .main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;} .main-container *{padding:10px;background:#aaa; border:dashed 5px #000;} .main-container * + *{margin-top:20px;} .main-header{ height:50px; background:#aaa; border-color:red; } .main-content{ min-height:1000px; } .main-header{position:sticky; top:0px;} div.main-header{top:80px } .main-footer{position:sticky; top:160px } <main class="main-container"> <header class="main-header">HEADER</header> <div class="main-header">MAIN CONTENT</div> <footer class="main-footer">FOOTER</footer> </main>Primero cambia la clase de tu componente corporal, le diste la clase incorrecta y para mi el resultado es bueno?