CODEWITHSUNDEEP
csscss-position
Matthew
Matthew

Reputation: 11280

Getting an absolute positioned div under another div

Absolute div keeps showing up above the other divs, while is should appear underneath; here is a quick demo:

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;
}

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

Answers (4)

Ashish
Ashish

Reputation: 11

just do => z-index:-1; of the id '#line'

Upvotes: 0

Khanh TO
Khanh TO

Reputation: 48992

You have to set position: relative or position: absolute to h1

Upvotes: 1

FelipeAls
FelipeAls

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

Quentin
Quentin

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

Related Questions