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 () 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 () below!
Agree with a comment or answer? Like () to up-vote the contribution!
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.
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 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?
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.
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?
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.
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?
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?
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.
) below.
) to up-vote the contribution!