css - 在另一个 div 下获取绝对定位的 div

Question

绝对 div 一直显示在其他 div 之上，而 is 应该出现在下面；这是一个快速演示:

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，因此它不会在那里应用。

在 h1 上设置 position: relative