Not all of us still have access to the path you’re on. Could you please describe what this positioning error actually is? Otherwise, I have no idea what is intended from the screenshot and what isn’t.
Could you provide a screenshot with the difference between the header’s position being fixed and not?
Applying a fixed position to an element will remove it from the normal flow of the document. This places it in a new stacking context and prevents it from respecting the applied properties of its parents elements. You can address this by giving the header its own properties for width and background color. You may also want to give the following elements a new margin to prevent them from overlapping.
I think the reason you are having issues with your locations section is because of margin collapsing:
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top
of a block from the margin-top
of one or more of its descendant blocks; or no border, padding, inline content, height
, or min-height
to separate the margin-bottom
of a block from the margin-bottom
of one or more of its descendant blocks, then those margins collapse. The collapsed margin ends up outside the parent.
To paraphrase, because there is no content, padding, border, or in-line element between your teas and your locations heading, the margins of the heading is collapsing with the margin of the section, and essentially are acting as a combined margin, where the larger of the two margins wins. You might fix this by adding something as simple as padding to the top of your heading.
Thank you very much for your help, now I know where the issue is.
1 Like