z-index on nested absolute element within fixed element

I'm scratching my head ove开发者_如何学Cr this one. I would like for the green rectangle to be underneath the yellow topbar.

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; }

EDIT: This is fixed by using z-index:-1; on .attention as answered. However, my actual problem was that I had a transparent red background which fooled me, if anyone runs into the same problem.

Just give it a z-index of -1.

Here's the fiddle: http://jsfiddle.net/PY9ss/2/

Does .attention { z-index: -1 } do what you want?

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