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.

1 Like

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

8 Likes

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.

5 Likes

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?

4 Likes

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?

2 Likes

After completing Step 1 of this exercise (changing the position inside of the header rule from absolute to fixed), it says “Notice that part of the “Welcome” section is now covered up by the header.” But it seemed to me that the “Welcome” section was already covered by the header when the header was set to absolute. Am I wrong in thinking nothing changed in that regard?

That may well be the case since absolute and fixed are both out of normal flow so content can slip under them in both cases. Don’t let the lesson narrative throw you off.

1 Like

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?

5 Likes

In this exercise, setting the position of the header element to fixed takes it out of the normal html flow. This causes a complication in that the rest of the page ignores its presence. As a result, when the page is first rendered, before you even scroll, part of the page is obscured underneath the header.

The solution in the exercise is to introduce a relative offset to the next element on the page. That brings the next element out from underneath the header, but now we have overlap with element after that. Wouldn’t it be easier to put some white space at the top of the page so that all the elements except for the header are just shifted down. That seems simpler and less error prone to me that individually offsetting every element on the page.

Am I missing something?

I have the same question as others in this thread. I understand that giving the header element a fixed position causes it to “stick” to the top of the screen and other elements are now ignoring it and flowing underneath. However when the .welcome element is given a relative position, why does it suddenly jump forward in front of the header?

The next section of the lesson discussing z-indexes, but only in terms of manually changing it using an integer value. There’s no mention of relative positioning coming with a default higher integer than fixed positioning.

Does this have something to do with the fact that fixed positioning seems to have an overlay effect, rather than fully covering the content beneath?

3 Likes

Does “relative” and “absolute” and “fixed” property ignore flow of the element or html documents?

This is very confusing.

Those two properties take their element out of normal flow.

That property lets its element stay in normal flow.

2 Likes

It seems like absolute and fixed only really make sense when they are applied to the HTML element located at the start of the flow. What if, for example, we had set the position of a box in between the first and third elements in the flow to absolute and offset its position? Which element would it offset itself relative to?

Is there any reason why header element is transparent? I cannot find property in stylesheet that caused this effect.

2 Likes

It’s not transparent in my workspace, but adding an opacity property changes that. Check the selector rule for header and see if that property exists. You can play with it or remove it. I set it to 75% and it looks okay.

When we set the position of the .welcome, why header element could not cover the element with the class welcome?