सीएसएस: अपनी मूल कंटेनर

Question

में एक div ब्लॉक * नहीं * ले जगह बनाने के लिए कैसे अगर मैं 2 div टैग नहीं है:

<div id="parentDiv"> 
    <div id="childDiv"><!-- other html --></div> 
    <!-- parent div html --> 
</div> 

मैं सामग्री <!-- parent div html --> ओवरलैप <div id="childDiv"> की सामग्री चाहते हैं।

कारण (यदि यह किसी के लिए खराब कोड डिज़ाइन जैसा दिखता है): मुझे Google साइटों में हैक वर्कअराउंड की आवश्यकता है, मैं साइडबार एनवी पर कस्टम कोड नहीं जोड़ सकता, केवल मुख्य HTML स्थान में, मैं एक फ्लोट करना चाहता हूं div जो मजबूर सीमा के आसपास पाने के लिए साइड बार पर कोई स्थान नहीं लेता है और अपेक्षाकृत स्थिति में रहता है।

मैं childDiv को इसके बास्टर्डीकृत मुख्य पृष्ठ कंटेनर में स्थान लेने से रोकने के अलावा सबकुछ कर सकता हूं।

Answer 1

आप इसे एक स्थिति पूर्ण कर सकते हैं, और इसे मार्जिन के साथ नेविगेट कर सकते हैं।

 

    #childDiv { 
     position: absolute; 
     margin-top: -100px; 
     margin-left: -100px; 
    } 

Answer 2

आपको प्रवाह से बचपन को ले जाना होगा। ऐसा करने का सबसे अच्छा तरीका पर div और position: relative पर position: absolute है।

Answer 3

कैसे के बारे में एक सरल

#childDiv {height:0; overflow:visible;}

लेकिन आप शायद यह एक पृष्ठभूमि रंग के लिए एचएम करना चाहते हैं? हम्म।

Answer 4

#parentDiv { 
    position: relative; 
} 
#childDiv { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
} 

आप के आसपास सामग्री टक्कर, या सामान है कि साइडबार के 'बाहर' ओवरलैप करने की जरूरत है, तो आप नकारात्मक हाशिए childDiv की चौड़ाई बढ़ाने या इसे स्थानांतरित करने के लिए कवर करने के लिए उपयोग कर सकते हैं (पैडिंग या मार्जिन जो आप ओवरराइड नहीं कर सकते हैं)।

यदि आपको #childDiv को पूरे #parentDiv को कवर करने की आवश्यकता है, तो आप बच्चे डीआईवी पर न्यूनतम ऊंचाई सेट करने के लिए थोड़ी सी जावास्क्रिप्ट का उपयोग कर सकते हैं, फिर किसी भी सामग्री को कवर करने के लिए रंगीन पृष्ठभूमि या कुछ जोड़ें।

var parentHeight = jQuery('#parentDiv').height(); 
jQuery('#childDiv').css('min-height',parentHeight + 'px');