将绝对div（具有可变高度）定位在内容之上

Question

请查看我的fiddle：

.pos_absolute div位于.content div下，但使用CSS我已将id显示在顶部。

问题在于，在我的场景中，我知道 .pos_absolute div 的高度，我可以为.content div设置margin-top 。

当.pos_absolute div的高度变化时，我该怎么办？ 有CSS修复吗？或者我需要使用jquery？ 有什么想法吗？

Answer 1

你可以使用jQuery做到这一点：

$(".content").css("marginTop", $(".pos_absolute").height() + 32 +"px");

Answer 2

使用JQuery执行此操作。

请参阅 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>
​