FAQ: CSS Display and Positioning - Z-Index


#1

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!


#2

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


#3

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.


#4

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?


#5

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??


#6

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.