Thanks. I have tried z-order and have been looking into this…
I actually think the header was staying above (which is what z-order would achieve),
But the contents is going through the header.
I think this is inevitable with divs. (Even with z-order, one passes through the other it’s just a question of which).
What I can do is
(So that there’s no gap above the header so there’s no peep hole for people to see content passing through over the header!)
I found I can add a background-color to the header and a minimum width to 100%
<div id="header" style="position:fixed; background-color: grey; min-width:100%">
And then while the content still scrolls through the header, the background colour hides the content the content that goes beyond the header as it scrolls through it.
In the past we had Frames and with frames, you could have a navigation bar at the top, and in a bottom frame you could have contents, and you could scroll contents, and the navigation bar would stay in place, and it looked fine… because the contents were scrolling in their own page below the navigation bar.
Whereas with divs, if the navigation bar is fixed in place, and other content is below it, then when it is scrolled it doesn’t stay below it, it scrolls up through(either under or over, best under, the header). And the best one can do is hide the fact that it has gone through the contents above it, by giving the contents above it a solid background colour.
I think frames with a border is a much nicer solution but unfortunately not recommended anymore.
The best option now might (in a post frames word), might just be to not have the navigation bar the top stay on top… But to let it scroll off the screen with the rest of the content. It looks like that’s what people do nowadays since frames have been retired.