CSS3 z-index issue

Question

Sorry for such a "dummy" question but I really couldn't find a solution.

I have illustrated the situation graphically:

Inside the container , there are TWO siblings ( RED <div> and BLUE <div> ). Both have position: absolute;

RED has z-index:1; BLUE has z-index:2;

RED 's child ( GREEN ) has position:relative; and z-index:99;

I want to make GREEN to be upper than BLUE

Thank you!

UPDATE 1. Here is the fiddle

http://jsfiddle.net/yn9z7/

Answer 1

The key to solve that is in the article linked by sudhAnsu63 :

New stacking contexts can be formed on an element in one of three ways:

When an element is the root element of a document (the element)

When an element has a position value other than static and a z-index value other than auto

When an element has an opacity value less than 1

But the interpretation is just the opposite . To set the blue element between the red and the green, the red one can not generate a stacking context. It is generating an stacking context because of the second rule; it has position absolute an z-index different from auto.

So, the solution is:

#red{
    z-index:auto;
}

demo

Answer 2

This won't work since Red's z-index is lower than blue. z-index only works with elements with a common root element.

Check out the Stacking Contexts part in this article

Answer 3

Here the Blue div and the Red div is the direct child of container div. z-Index will not work exactly.

try changing the opacity of blue div to 0.99;

.bluediv {
  opacity: .99;
} 

http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

Answer 4

yeah, this is not possible because child elements inherit the z-index of the parent. so it does not make sense to give the green div a z-index of 99 because it's z-index is only valid inside the parent (red div). So if you give a container a certain z-index lets say 20, the z-indexing inside this container starts again from 0. this is a good thing because otherwise we had to give all children a z-index of minimal 21 or they won't be visible. the first container on a web page is the body tag, you can stack all its children with the z-index property starting from layer 0 (z-index 0). just like the body tag every child has its own z-index "system" unrelated to higher elements in the DOM. so the z-indexing starts over from 0 inside a parent container with its own defined z-index.