Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Will Macleod
PLUS
Will Macleod
Courses Plus Student 18,780 Points
Posted by Will Macleod
Will Macleod
Courses Plus Student 18,780 Points

z-index question

Hi, z-index makes alot of sense to me, however i just have one question.

Is it possible to have a z-index lower than another element with a higher z-index YET have the lower z-index show ABOVE, however they do NOT share the same relative positioning parent?

1 Answer

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

Sure. It's easy to do because they do not share the same parent. Just give the parent of the element you want to appear on top a higher z-index than the other elements. Then every child of that parent will appear on top of the other elements, no matter what the child z-index is.

This is because giving an element (the parent, in this case) a position and z-index creates what is called a stacking context. Elements within a stacking context can be ordered with z-index relative to each other, but they can never appear above an element in a higher stacking context, and never below one in a lower stacking context.

Stacking contexts are created in other ways as well. CSS properties like opacity, transform, filter, and a few others cause stacking contexts to be created. This can cause some confusion if you're not aware of them.