获得另一个div下的绝对定位div

时间:2013-06-15 10:21:45

标签: css css-position

绝对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但它没有任何效果。

4 个答案:

答案 0 :(得分:1)

z-index仅适用于定位元素。由于h1(似乎是您正在谈论的“其他div”)是position: static,因此不适用于此。

position: relative

上设置h1

答案 1 :(得分:1)

您必须将position: relativeposition: absolute设置为h1

答案 2 :(得分:0)

z-index的{​​{1}}从1更改为-1:

#line

演示:http://jsfiddle.net/hvP8c/4/

请注意,它可能无法在IE6 / 7上运行。在IE8中确定。

答案 3 :(得分:0)

只是做=&gt;的z-index:-1; id'#line'