Получение абсолютного положения div под другим div

Question

Абсолютный div продолжает отображаться над другими div, а должен появляться под ним; вот быстрый демо:

http://jsfiddle.net/hvP8c/2/

<div id="logo"> 
    <h1></h1> 
    <div id="line"></div> 
</div> 
#logo { 
    position: relative; 
} 
h1 { 
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    border:1px solid #000; 
    background-color:#eee; 
    z-index:100; 
    margin:0 auto; 
} 
#line { 
    border-bottom:1px solid #033e5e; 
    position:absolute; 
    left:0; 
    top:30px; 
    width:100%; 
    z-index:1; 
} 

В этой демонстрации, линия должна идти ниже круга. Я пытался играть с z-index, но у него не было никаких эффектов.

Answer 1

z-index применяется только к расположенным элементам. Поскольку h1 (который, как представляется, является «другим div», о котором вы говорите) составляет position: static, он не будет применяться там.

Набор position: relative на h1

Answer 2

z-index изменения для #line от 1 до -1:

#line { 
    z-index: -1; 
} 

Демо: http://jsfiddle.net/hvP8c/4/

Имейте ввиду, что он не может работать в IE6/7. ОК в IE8.

Answer 3

Вы должны установить position: relative или position: absolute для h1

Answer 4

вобще => Z-индекс: -1; от id '#line'