FAQ: CSS Display and Positioning - Position: Fixed

This community-built FAQ covers the “Position: Fixed” exercise from the lesson “CSS Display and Positioning”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Position: Fixed

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

How come everything slide OVER the navbar at the end of the exercise?
I was expecting everything to slide UNDER, as with the gif. But it didn’t…
Googling so far hasn’t given any ideas. Please help.

To fix this, just give the header a z-index value greater than 1. That will make a higher layer than the other content.


Thanks, mtf.
The z-index was the next item on the classes list :smiley:

1 Like

Why does the header’s list items completely cover H1 and P, I’m confused why they aren’t automatically below the fixed header since these elements are already below the header in the HTML document. Also does the header appear to be at the very top of the page because this element is a child of the body and the body has no content yet so its pushed to the top of the document. Thank you !

A fixed element is out of normal flow so the elements that follow start at top left. Determine the height of the header and put a top margin on the next element to compensate for the hidden space beneath the header.


Why the rest of the page becomes messy?

Why does changing the position of .welcome to relative move it in front of the header in step 2?

Why does the .welcome cover the header? the header using fixed position was displayed on top of the other elements but why not for the welcome message? is there some sort of priority for display when it comes to relative vs fixed vs absolute positioning?