z-index of elements in different parents in Chrome

Question

There are two containers. One is fixed and covers 100% of the screen. Second is relative - contains scrollable content. The problem is that there are four elements to be positioned relative to each other as follows: 1st in a fixed container, 2nd in absolute, 3rd fixed, 4th in absolute.

<div class="container fixed">
    <div class="el z1"></div>
    <div class="el z3"></div>
</div>
<div class="container relative">
    <div class="el z2"></div>
    <div class="el z4"></div>
</div>

However, z-index of one of the parents will always be less than the other, which not allow to do order for 4 children elements.

There is fiddle http://jsfiddle.net/only_dimon/zkY4C/6/ I want order: yellow, green, white, black from bottom. But as you can see - yellow, white, green, black.

The result I want:

But elements should be in different containers.

Thanks in advance!

This helps for me: For many elements helps only html reconstruction. Luckily I don't need to use fixed container for fixed elements, because fixed element's position and sizes depends on window size, even if I put them into relative container.

Answer 1

After some further investigation, child element can't/aren't suppose to be able to overrule the parent z-index, some browser for example Firefox though ignores parent index for some reason and displays your elements are you wish but every other browser I've tried (Opera,Safari,Chrome) does not, so no it's not possible to accomplish what you want without changing the mark-up of your HTML for cross-browser compatibility.

Edit:

You can even find quite some posts in the subject.

How can I get a child of an element with lower z-index on front of a child of another element with higher z-index?

How to get a parent element to appear above child

can I override z-index inheritance from parent element?

Edit - 2:

Depending on what you want to accomplish there is many alternative way you could get a fake "zindex" behaviour, one thing worth looking at is pointer-events:none; together with a transparent background you'd never know it's above the other element.

If it's for the background, you could use box-shadows with diffrent settings to fake it.

can't come up with any other reason atm but if you tell me i'll try to give you a solution for it aswell.

Regards

Answer 2

Like this: http://jsfiddle.net/9Hh89/1/ ?

Here is my HTML:

<div class="fixed">
    <div class="yellow">
        <div class="green">
            <div class="white">
                <div class="black"></div>
            </div>            
        </div>        
    </div>
</div>

and the CSS:

html, body { height:100% }

body { padding:0 ;
    margin:0 ;
}

.fixed { height:100% ;
    min-height:100% !important ;
    background:#666666 ;
    position:relative ;
    z-index:1 ;
}

.yellow, .green, .white, .black {
    display:block ;
    margin:auto !important ;
    position:absolute ;
    top:0 ;
    bottom: 0 ;
    right: 0 ;
    left: 0 ;
}

.yellow { width:220px ;
    height:220px ;
    background:yellow ;
    z-index:100 ;
}

.green { width:170px ;
    height:170px ;
    z-index:200 ;
    background:green ;
}

.white { width:100px ;
    height:100px ;
    z-index:200 ;
    background:white ;
}

.black { width:50px ;
    height:50px ;
    z-index:300 ;
    background:black ;
}

Best,

Cynthia