Reputation: 11280
Absolute div keeps showing up above the other divs, while is should appear underneath; here is a quick demo:
<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;
}
In this demo, the line should go below the circle. I tried to play with z-index but it didn't have any effects.
Upvotes: 0
Views: 72
Reputation: 22181
Change z-index
for #line
from 1 to -1:
#line {
z-index: -1;
}
Demo: http://jsfiddle.net/hvP8c/4/
Beware that it may not work on IE6/7. OK in IE8.
Upvotes: 0
Reputation: 944568
z-index
only applies to positioned elements. Since the h1
(which appears to be the "other div" you are talking about) is position: static
it won't apply there.
Set position: relative
on the h1
Upvotes: 1