Question

Is it possible to set z-index that only applies to a certain ‘scope’, such as only affecting children of a certain element.

I’ve got an containerDiv with z-index 0. It contains a bunch of circles which should be placed on top of eachother in various depths, but I don’t want them to affect any other elements on the page.

I’ve got a bunch of other elements on the page (popups, dropdowns etc) which have z-index 1, and I would like them to be placed on top of the containerDiv and all of it’s childelements.
Since I’m lazy I’d preferably want to avoid having to adjust these element’s z-index values based on the circle with the highest z-index…
Much be awesome if there was some way that all other elements could view the containerDiv and all it’s children as having the same z-index.

Is this possible to achieve with css?

Answer 1

The answer depends on whether or not your other elements are descendants of the containerDiv or not. To answer the question: Yes, it’s almost certainly possible, given a bit of shuffling of the markup.

But what you need to understand is the concept of stacking context:

http://www.w3.org/TR/CSS2/visuren.html#layers

Stacking context is not inherited the way other properties are: “A stacking context is atomic from the point of view of its parent stacking context; boxes in other stacking contexts may not come between any of its boxes.” It’s not like every element on the page with z-index:2 will be behind everything on the page with z-index:4. Z-index (combined with a position declaration) is typically (though not exclusively) used to resolve the stacking order when two elements share a containing element.