jquery - 将绝对 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 执行此操作。

引用这个 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>
​