jquery - 将绝对 div（高度可变）定位在内容上方

Question

请看看我的小提琴：

.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

查询：

$('.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>
​