When i have multiple div's with sticky position the first div is overlapping the second div while at the end and not staying locked at the position without overlapping. How do i make it lock at a position when it ends the corresponding div
Here is a copepen for that
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;}
Original problem in website
First calculate the height of first element i.e( 80px including border and paddings ) in your case.
Give 80px top to the second element.
Third element will have a top of 160px and so on.
All elements will have position:sticky
Try this,
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>First change the class of your body component, you gave it the wrong class and for me the result is good?