I'm having trouble getting my footer to display correctly on top of a sticky header. Even though they are both in the same level markup, it just doesn't seem to work as expected.
Interestingly, a snippet of code below appears to be working, but not when using the exact same code in Safari. Sometimes resizing the window after the page loads seems to fix the issue, which is puzzling. Any insights or suggestions on this matter would be highly appreciated!
#header{
position: sticky;
top:0;
background-color: red;
z-index: 1;
height:60vh
}
#footer{
position:relative;
background-color: yellow;
z-index: 100;
height:60vh
} <div id=header>
Hello world
</div>
<div id="footer">
Hello world
</div>