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?

3 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.

19 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.

3 Likes

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.

4 Likes

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 obvious difference is one number is higher. That means it will get priority if it is the highest z-index, so it will appear on top.

Why is the welcome

able to cover the header
. Even though further z-index of header is set to 10 but even though the header
was able to cover all the question
s but not the welcome
initially. Just curious, what is the reason ? Since both the question
and welcome
have position:relative I’m unable to get the point.

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?

Wow. That’s a very good speech. I am amazed about how well you communicate to people. Such wisdom!

3 Likes

I just read that they have a default z-index of auto. What does auto do?

1 Like

I don’t really understand what you mean? Can you please explain?

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.

2 Likes
<div>
  <h1>Hello, World!</h1>
  <p>This is my website!</p>
<div>
div {
  z-index: 1;
}

In the example above, will the <h1> and <p> elements both have a z-index of 1?

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.

1 Like

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?