固定元素中嵌套绝对元素的z-index

Question

我正在摸着这个。我希望绿色矩形位于黄色顶部栏下方。

http://jsfiddle.net/PY9ss/1/

HTML：

<div class="body">
    <div class="topbar">
        <div class="mid">
            <div class="attention"></div>
        </div>
    </div>
</div>

CSS：

.body { background: gray; width: 100%; height: 800px;}
.topbar { background: yellow; width: 100%; height: 50px; position: fixed; top:0; left:0; z-index: 10; }
.mid { background: red; width: 400px; height: 40px; margin: 10px auto 0; position: relative; }
.attention { background: green; width: 100px; height: 40px; border: 1px solid black; position: absolute; top: 30px; left: 0; }

修改 这是通过使用z-index修正的：-1;作为回答的问题。然而，我的实际问题是，如果有人遇到同样的问题，我有一个透明的红色背景，这会欺骗我。

Answer 1

只需给它一个z-index -1。

这是小提琴：http://jsfiddle.net/PY9ss/2/

Answer 2

.attention { z-index: -1 }能做你想做的吗？

http://jsfiddle.net/thirtydot/PY9ss/3/