Question

I have 3 elements, two on the same level, and one child, all having fixed position. I need to set the z-index properties to place the parent on the bottom, the element on the same level in the middle, and the child on top.

I’ve tried setting a higher z-index for the child, but it’s not working.

<div class="red">
    <div class="blue"></div>
</div>
<div class="green"></div>

Here is the case http://jsfiddle.net/udENm/21/ (I need red on the bottom, green in the middle and blue on top, still maintaining red and greenon the same level).

My CSS is like this

.red {
    position: fixed;
    z-index: 2;
}

.green {
    position: fixed;
    z-index: 2;
}

.blue {
    position: fixed;
    z-index: 5;
}

Answer 1

The green blocks z-index needs to be lower than the red ones. I used this CSS instead of the one you posted:

.foo {
    background: red;
    position: fixed;
    left: 50px;
    top: 50px;
    z-index: 2;
    width: 100px;
    height: 100px;
}

.bar {
    background: green;
    position: fixed;
    left: 100px;
    top: 100px;
    z-index: 1;
    width: 100px;
    height: 100px;
}

.child {
    background: blue;
    position: absolute;
    top:50%;
    left:50%;
    z-index: 5;
    width: 50px;
    height: 50px;
}

Works fine, as you can see green is now z-index 1, red is z-index 2 and the blue block has absolute positioning.