jquery - コンテンツの上に絶対 div (可変高) を配置します

Question

私のフィドルを見てください：

.pos_absolute div は .content div の下にありますが、CSS を使用して id を上に表示するようにしました。

問題は、私のシナリオでは .pos_absolute div の高さを知っており、 .content div のマージントップを設定できることです。

.pos_absolute div の高さが異なる場合はどうすればよいですか? CSSの修正はありますか？または、jquery を使用する必要がありますか? 何か案は？

Answer 1

JQueryを使用してこれを行います。

このライブデモを参照してください

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>
​

Answer 2

jQueryを使用してそれを行うことができます：

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