css - 重なり合うことなく相対的に配置された要素の下に要素を配置する方法は?

Question

相対+絶対配置要素を持つ要素の後に何かを置くと、重なります。高さを指定するとこれは行われませんが、相対的に配置された要素のコンテンツは動的であるため、これを行いたくありません。高さを指定せずに重なりを取り除く方法は?

簡単な例:

<div style="position:relative">
    <div style="position:absolute;">
        blabla
    </div>
</div>
I WANT THIS BELOW

Answer 1

absolute配置は、要素を構造の流れから外します。その存在はこの理由で無視されます。それが目的です。左または右に要素を配置する必要がある場合は、使用しますfloat

フローティング要素の場合、div の下部をクリアして、レイアウトが保持されるようにする

<div style="clear:both;"></div>

デモhttp://jsfiddle.net/kevinPHPkevin/uHuSF/

それ以外の場合は、目標を達成するために別のアプローチが必要になります。

Answer 2

position:relative最初の要素に適用したので、 を指定するheightか、指定する必要がありますpadding-bottom。

たとえば、提供されたコードで、私はそれに適用heightし20pxました。

注:この種のシナリオではheight、使用するよりも使用する方が良いpadding-bottom

<div style="position: relative; height: 20px;">
    <div style="position:absolute;">blabla</div>
</div>
<div>I WANT THIS BELOW</div>