How do you start the scrolling element after the fixed navbar, rather than under it?

So in the Display & Positioning lesson we learn that you can fix the header element to the top of the page with position: fixed; width: 100%; z-index: 1; and then by making the next element position: relative; top: [height-of-header-element];. This means the relative element appears at the bottom of the fixed element and then scrolls under it.

What I have noticed from making my own project is that the relative element really does scroll under it, even though it is not visible, meaning that inline hrefs are now useless, as they potentially point to things behind the header element.

So my question is how can you make the main element start after a fixed header element, so that it doesn’t scroll under it, but starts scrolling only from the boundary?

I would suggest reviewing this part of that lesson. It can be easy to forget about; I’ve done it a few times.


edit: Hint: Are all your elements at the correct z-index