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!
The number is arbitrarily higher than zero. It could be 1, or 100, or 1000 and not matter so long as it is higher than the element we are attempting to overlap. All elements have z-index = 0 by default.
Just curious, does codecademy have the fixed and absolute positioning rules backwards? It seems like the lesson was saying when the position of an element is set to absolute it should scroll with the user(when I did it, it didn’t do that), and when it is set to fixed, it should stay fixed on the page and not go with the scroll(which is what happened when I scrolled). I don’t know if I misunderstood the article or if the developers got it wrong. Who knows?
So the higher the z-index value is, it becomes the top???
What is the default z-index values of position fixed, absolute and relative?
Like if some elements overlap each other and with each one, they had position absolute or relative or etc, which one goes on top??
z-index applies to normal flow. How it applies to position: fixed and position: absolute will take some experimenting.
Yes, when elements overlap, the one with the higher z-index will appear on top. The default z-index value is, I believe, zero, or in general terms, no elements have the property.
When we have two elements that overlap, the one with a z-index property will likely be on top. Some experimenting will prove this out.
Save your experiments, both the HTML/CSS and a screenshot. Share your findings, please.
I know these two things are not exactly the same thing… but the lesson states that z-index does not work on static elements.
This means we can apply z-index to any non-static element; i.e. an element with position: relative, absolute, or fixed.
So it appears to me z-index is applied to elements that are either (or both) moved from their default position or taken out of the normal flow, and applies to all elements on the page (in the sense that static elements respect any other positioned element having a z-index).
I’m just trying to grok your quote and square it with the above; can you shed any light?
It is clearly my interpretation that lacks polish; grok away. Finally somebody is willing to do the leg work. That’s a step above beginner level when a learner actually begins to verify information they read, or at least follow up on it.
Beginners are not very good gleaners. They catch the chips as they fall. Learners, on the other hand are fledging gleaners. They know what they’re putting into their basket, even if it is a bit foreign. It will all come out in the wash.
You are at the wash tub and clearly see there is something amiss. Kudos for spotting that. Not only does it mean you’re paying attention, it also means you’re doing the follow up reading to correct these slights that miss the mark. In the process you’ve gained deeper insight. Somehow I feel like this is mission accomplished, if a bit subversive.
I was also confused about that at first, but I believe that what the mean is that an element with its position set to absolute will scroll off the screen while a fixed element will remain in its position and not be scrolled off but instead scroll with you.
it has the same function when i place z-index: 10; and z-index: 1; . both of them no longer covered by other elements when i scroll. I just wondering, what is the difference between z-index: 1 and z-index: 100; ?
The only element that should have a declared z-index property is the header. All other elements will have a default z-index (undeclared) of 0. Does your welcome class declare a z-index?
It lets the browser compute it. The parent’s value will be inherited.
On a flat page the z-index is of no importance since every element renders in the same two dimensional space. Elements that are taken out of normal flow can be stacked up (out of the screen) according to their z-index. If we wish to hide something behind the page then we can give it a negative value, and then change it upon some event to a positive value to unhide it.
Yes, although it won’t matter. They are in normal flow so take that of the parent. We don’t need to set the property if there are no elements out of normal flow, and even then it only needs to be applied to that element, none of the others.
in the z-index page, it says that the position of the box-bottom is set to absolute and that it will IGNORE the box-top and overlaps it as a user scroll. While in the absolute page lesson (2 pages earlier), it says that a box with it’s position set to absolute is IGNORED by the others boxes. So am i right to say that when a box position is set to absolute, it ignores the other boxes AND it gets ignored?