Css position sticky, overlaps instead of pushing - html

Question

I am having hard time, to understand why sticky div does not push other sticky div.
And I am pretty sure I have seen it working like that, but I can't figure that out.
I want Header 1 to push Header 2 not overlap on it.
HTML
<div class="header">
<h1>Header 1</h1>
</div>
<div class="item">
<h1>Item1</h1>
</div>
<div class="item">
<h1>Item2</h1>
</div>
<div class="header">
<h1>Header 2</h1>
</div>
<div class="item">
<h1>Item1</h1>
</div>
<div class="item">
<h1>Item2</h1>
</div>
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #000;
font: bold 20vw Helvetica, Arial, sans-serif;
}
.header {
position: sticky;
top: 0px;
height: 100%;
width: 100%;
background: white;
}
.item {
height: 100vh;
width: 100%;
background: #00f;
}
Here is an example and what I am trying to do.
https://jsfiddle.net/7zfq491o/

Answer 1

You need different wrapper:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #000;
font: bold 20vw Helvetica, Arial, sans-serif;
}
.header {
position: sticky;
top: 0px;
background: white;
}
.item {
height: 100vh;
background: #00f;
}
<section>
<div class="header">
<h1>Header 1</h1>
</div>
<div class="item">
<h1>Item1</h1>
</div>
<div class="item">
<h1>Item2</h1>
</div>
</section>
<section>
<div class="header">
<h1>Header 2</h1>
</div>
<div class="item">
<h1>Item1</h1>
</div>
<div class="item">
<h1>Item2</h1>
</div>
</section>