Header components, z-lists and gaps
I'm creating a React component for a header, to be used in a page layout. It's going to be slightly glassy, and pinned to the top of the page. I would like there to be a gap at the top of the page so that on page load the top of the content is not hidden under the header.
I've not done this before (I've had a roughly 20 year gap in doing web stuff), so I don't know if there's a convention for doing this. Is this usually done as part of header? This appeals to me because it's then encapsulated together. Is it usually done as 2 parts - the header and a gap for the header at the top of the content area? Does the answer depend on the rest of the layout? Does the answer depend on other things that I haven't even considered? (honestly, the most likely option).
I think maybe the question is "what is it that I need to think about in order to answer this question?"
4 Replies
If the header is "pinned", you are probably going to do something like position:fixed, which takes it out of the flow. That means no amount of margin or padding on the header itself is going to help. What you need is the margin/padding on the container holding the content that might get covered, but you have to take into account margin collapse when doing this.
Position: sticky is probably preferred so it isnβt taken out of the flow until it needs to.
If you have to use fixed I would get the height of the header with JavaScript and and set the margin or padding on the wrapper with the content.
I don't think I have to use fixed.
I'll go learn about sticky, and see what that looks like in what I'm doing.
The choice between fixed and sticky depends on if you want the header to always stay in the same spot or if you want it to eventually scroll away.