ओवरलैपिंग के बिना सापेक्ष तैनात तत्व के नीचे तत्व को कैसे स्थानांतरित करें?

Question

यदि मैं सापेक्ष + पूर्ण स्थान वाले तत्वों के साथ तत्व के बाद कुछ भी डालता हूं, तो यह ओवरलैप हो जाता है। अगर मैं ऊंचाई निर्दिष्ट करता हूं तो यह ऐसा नहीं करता है, लेकिन मैं ऐसा नहीं करना चाहता क्योंकि अपेक्षाकृत स्थानित तत्व की सामग्री गतिशील है। ऊंचाई निर्दिष्ट किए बिना ओवरलैपिंग से कैसे छुटकारा पाएं?

सरल उदाहरण:

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

Answer 1

आप अपने पहले ही तत्व को position:relative आवेदन किया है या तो आप height तैयार करें या इसे करने के लिए padding-bottom प्रदान करने के लिए है के बाद से।

उदाहरण के लिए, आपके प्रदत्त कोड में मैंने height20px पर लागू किया है।

नोट: height का उपयोग करते हुए परिदृश्य के इस प्रकार

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

Answer 2

absolute स्थिति संरचना के प्रवाह से बाहर तत्व लेता है के लिए padding-bottom का उपयोग कर से बेहतर है। इस कारण से इसकी उपस्थिति को नजरअंदाज कर दिया गया है, इसका उद्देश्य यही है। आप एक तत्व बाईं तैनात या सही तो का उपयोग की जरूरत है float

चल तत्वों आप अन्यथा एक div ऐसा है तो लेआउट

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

डेमो http://jsfiddle.net/kevinPHPkevin/uHuSF/

संरक्षित है के नीचे स्पष्ट सुनिश्चित जब अपने लक्ष्य को पूरा करने के लिए अलग-अलग दृष्टिकोण की आवश्यकता है।