Question

Please take a look at my fiddle:

The .pos_absolute div is under the .content div, but using CSS I have made id display on top.

The problem is that in my scenario I know the height of the .pos_absolute div and I can set the margin-top for the .content div.

What can I do when the .pos_absolute div’s height varies?
Is there a CSS fix? Or do I need to use jquery?
Any ideas?

Answer 1

Do this using JQuery.

​Refer this LIVE DEMO

JQuery:

$('.pos_absolute').css('top', 0);
var tempHeight = $('.pos_absolute').height();
$('.content').css('margin-top', (tempHeight+2)+"px");

CSS:

.content {
    background-color:#FF2E2E;
}
.pos_absolute {
    position:absolute;
    left:0;
    background-color:#000;
    color:#FFF
}
​

HTML:

<div class="content">
    Content div <br/>
    Content div <br/>
    Content div <br/>
    Content div <br/>
    Content div <br/>
</div>
<div class="pos_absolute">
    Pos absolute div <br/>
    Pos absolute div <br/>
    Pos absolute div <br/>
</div>
​