Fixed Header is blocking hiding elements behind it

HTML-CSS
1

Tell us what’s happening:
Hi, I am trying to get my header to stay at the top of the page when scrolling as required to pass the challenge. I changed the position to fixed, but now it is blocking elements that follow it in the document flow. I guess this makes sense since position fixed literally takes the element out of the document flow. However, I’m now confused as to how to get the content that’s hiding behind the header, to appear below the header where it would normally appear if the header didn’t have a fixed position. What would be the best way to accomplish this?

Thank you!

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

2

Well first things first, if you want to hide it, you have to change your header background color. Then when that’s done, you can use the CSS property z-index with a high number so it will always be on the top. Ex:

element {
  z-index: 500;
}

You can learn more about z-index here:

3

Okay that makes sense. However, when you are at the top of the page I would like the content to display below the header, not behind it. Not sure if that makes sense.

4

Yes it does make sense, you can try to use the margin on the element that you want below the header. So:

element {
  margin-top: 200px;
}

Or a second apporach might be to use position: sticky on the header instead of position: fixed;

5

Yup that’s it! Thank for the help!