Reputation: 3583

CSS3 z-index issue

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

I have illustrated the situation graphically:

enter image description here

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/

Upvotes: 2

Answers (4)

vals

Reputation: 64184

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

Upvotes: 3

kasper Taeymans

Reputation: 7026

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.

Upvotes: 0