css - 別の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

position: relativeorposition: absoluteを h1に設定する必要があります

Answer 3

1 から -1 にz-index変更:#line

#line {
    z-index: -1;
}

デモ: http://jsfiddle.net/hvP8c/4/

IE6/7 では動作しない場合がありますのでご注意ください。IE8でOK。

Answer 4

=> z-index:-1; を実行するだけです。ID「#line」の