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索引固定的：-1;注意力被回答。但是，我的实际问题是，如果有人遇到同样的问题，我有一个透明的红色背景，这使我迷惑了。

Answer 1

只要给它的-1 z-index。

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

Answer 2

是否.attention { z-index: -1 }你想要做什么？

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