Survey Form Project- Creating a fixed header

HTML-CSS
#1

Ok so here’s my issue. Seems very simply and I’ve read several tutorials describing exactly what I want but none of the examples work with my page.

I want the header to remain fixed on the top of the page while allowing the user to scroll through the survey. The box containing the survey contents should disappear under the header. In fact, the exact format for this is covered in the Applied Visual Design course in freeCodeCamp here: https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning

No matter what I try, I can’t seem to stop survey box from scrolling over the header. What do I need to do to change this?

Here’s a link to my project: https://codepen.io/artbaker82/pen/NWRzppj

Thank you!

#2

Try adjusting the z-index of the header.

#3

I had tried that yesterday while trying to solve the problem, but all that did was position the text of the header on top of the survey box.

After stepping away from the project for a while and seeing your reply, I realized that the issue had to do with the fact that the header and the survey box are nested within the body element with the same background.

I’m sure this is not the best way to solve this, but I set the background of the header to the exact same color gradient as the main page background, changed the z- index so the header appears on top, and set the height of the header accordingly.

This brings up another question though: When I set the background of the header independently, why does it still show up as an uninterrupted image on the whole page? This was my intention, but I’m curious why there isn’t a small division between the header and the rest of the page.