I have a footer that need to go on top of a sticky header.
Unfortunately it doesn’t work, despite them being on the same level markup etc.

The snippet below seems to work? But not the exact same code in safari.
If i resize the window after page load it seems to sometimes update and work. Bug?
Any ideas on this would be 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>