javascript - 元素 z-index css 属性

Question

我有 3 个元素，两个在同一层，还有一个 child ，都有固定的位置。我需要设置 z-index 属性以将父元素放在底部，同一级别的元素放在中间，子元素放在顶部。

我已经尝试为 child 设置更高的 z-index，但它不起作用。

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

这里是案例http://jsfiddle.net/udENm/21/ (我需要 red 在底部，green 在中间，blue 在顶部，仍然保持 red 和 green同级)。

我的CSS是这样的

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

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

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

Answer 1

将您的定位设置为绝对定位，并从父 div(红色的)中完全删除 z-index。 http://jsfiddle.net/calder12/udENm/32/

.foo {
background: red;
position: absolute;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
}

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

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