FAQ: CSS Display and Positioning - Z-Index

This community-built FAQ covers the “Z-Index” 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 Z-Index

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!

why is the value of z-index is 10 here?

2 Likes

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.

5 Likes

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.