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/