Jak pozycjonować element poniżej względnie pozycjonowanego elementu bez nakładania się?

Question

Jeśli dodaję cokolwiek za elementem z względnymi + pozycjami bezwzględnie umieszczonymi, to nakłada się. Nie robi tego, jeśli określę wysokość, ale nie chcę tego robić, ponieważ zawartość względnie pozycjonowanego elementu jest dynamiczna. Jak pozbyć się nakładania bez określania wysokości?

Prosty przykład:

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

Answer 1

Ponieważ zastosowaliśmy position:relative do pierwszego elementu albo masz określić height lub dostarczyć padding-bottom do niego.

Na przykład w podanym kodzie zastosowałem do niego height z 20px.

Uwaga: Za pomocą height jest lepsza niż padding-bottom tego rodzaju sytuacji

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

Answer 2

absolute pozycjonowanie odbywa element z przepływem konstrukcji. Jego obecność jest z tego powodu ignorowana, to jest jej cel. Jeśli potrzebujesz element umieszczony w lewo lub w prawo, a następnie użyć float

Kiedy elementy pływające zapewnić wyczyścić dno div tak wtedy układ jest zachowany

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

DEMO http://jsfiddle.net/kevinPHPkevin/uHuSF/

przeciwnym razie Aby osiągnąć cel, wymagane jest inne podejście.