z-индекс на вложенном абсолютном элементе в фиксированном элементе

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

EDIT: Это исправлено с помощью 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/