स्थिति निरपेक्ष और अतिप्रवाह छिपा

Question

हमारे पास दो DIV हैं, एक दूसरे में एम्बेडेड है। यदि बाहरी DIV पूर्ण स्थिति में नहीं है, तो आंतरिक DIV, जो पूर्ण स्थिति में है, बाहरी DIV ( उदाहरण ) से छिपा हुआ अतिप्रवाह का पालन नहीं करता है ।

क्या आंतरिक DIV को बाहरी DIV से छिपाए बिना बाहरी DIV को पूर्ण स्थिति में स्थापित करने के लिए आंतरिक DIV का पालन करने का कोई मौका है (क्या कारण है कि हमारा पूरा लेआउट खराब हो जाएगा)? इसके अलावा हमारे भीतर DIV के लिए सापेक्ष स्थिति एक विकल्प के रूप में हम एक मेज टीडी (के "बाहर हो जाना" करने की जरूरत नहीं है exmple )।

क्या कोई अन्य विकल्प भी हैं?

Answer 1

बाहरी बनाने <div>के लिए position: relativeऔर मन की <div>करने के लिए position: absolute। यह आपके लिए काम करना चाहिए।

Comments

आप दोनों को धन्यवाद। मैंने हमेशा सोचा स्थिति: रिश्तेदार डिफ़ॉल्ट है। मैंने अभी सीखा कि स्थैतिक डिफ़ॉल्ट है। मैं शंखों के उत्तर को स्वीकार करता हूं क्योंकि दोनों उत्तर समतुल्य हैं और शंखण को कुछ और बिंदुओं की आवश्यकता है; ;-)

— जरदोज़

कुछ स्पष्टीकरण और / या प्रलेखन एक महान अतिरिक्त होगा।

— शोदेव

Answer 2

position: relativeबाहरी div के बारे में क्या ? उदाहरण में जो भीतर को छिपाता है। जब आप शीर्ष या बाएँ निर्दिष्ट नहीं करते हैं, तो यह भी इसे अपने लेआउट में स्थानांतरित नहीं करेगा।

Answer 3

एक बिल्कुल तैनात तत्व वास्तव में एक relativeमाता-पिता, या निकटतम पाए गए रिश्तेदार माता-पिता के बारे में तैनात है । तो तत्वों के overflow: hiddenबीच relativeऔर absoluteतत्वों के बीच होना चाहिए :

<div class="relative-parent">
  <div class="hiding-parent">
    <div class="child"></div>
  </div>
</div>

.relative-parent {
  position:relative;
}
.hiding-parent {
  overflow:hidden;
}
.child {
  position:absolute; 
}

Answer 4

आप बस divइस तरह से बनाते हैं :

<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
    <br/>
    <div style="position:inherit; width: 200px; height:200px; background:yellow;">
        <br/>
        <div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
            <br/>
        </div>
    </div>
</div>

मुझे उम्मीद है कि यह कोड आपकी मदद करेगा :)