पूर्ण स्थिति और ओवरफ़्लो: छुपा

Question

<div id="parent" style="overflow:hidden; position:relative;"> 
    <div id="child" style="position:absolute;"> 
    </div> 
</div> 

मुझे बाल तत्व दिखाना होगा जो इसके मूल तत्व से बड़ा है, लेकिन अतिप्रवाह हटाने के बिना: छुपा हुआ; क्या यह संभव है? मूल तत्व में position:relative; जैसे ही बच्चे इसके माता-पिता सीमाओं से बाहर हो जाता है, बाल तत्व छीन जाता है।

Answer 1

यह .. क्या तुम दोनों overflow: hidden और position: relative माता पिता div पर साथ करना चाहते हैं पूरी तरह से असंभव है बजाय आप एक अतिरिक्त बच्चे div लागू करने और चाल है कि करने के लिए overflow: hidden कर सकते हैं।

देखें: http://jsfiddle.net/thirtydot/TFTnU/

HTML:

<div id="parent"> 
    <div id="hideOverflow"> 
     <div style="width:1000px;background:#ccc">sdfsd</div> 
    </div> 
    <div id="child">overflow "visible"</div> 
</div> 

सीएसएस: clearfix के रूप में छिपा:

#parent { 
    position:relative; 
    background:red; 
    width:100px; 
    height:100px 
} 
#child { 
    position:absolute; 
    background:#f0f; 
    width:300px; 
    bottom: 0; 
    left: 0 
} 
#hideOverflow { 
    overflow: hidden 
} 

Answer 2

उपयोग सीएसएस (तत्वों अतिरिक्त सीएसएस परिभाषित किया है मैं सिर्फ डाल शैली स्पष्टता के लिए जिम्मेदार बताते हैं) ...

* {margin: 0; padding: 0;} 

#parent {width: auto; overflow: hidden;} 

#child {position: absolute; width: auto;} 

चौड़ाई ऑटो यह हमेशा छोटी संभव आकार करने के लिए जोड़ देंगे, साथ

; और रीसेट के साथ यह प्राकृतिक प्रवाह को बनाए रखने में मदद करेगा।

लेकिन यदि बच्चा माता-पिता की तुलना में किसी भी तरह से बड़ा है, तो यह संभव नहीं होगा। लेकिन इस सीएसएस के साथ मुझे लगता है कि आप जो भी संभव हो उतना हासिल करना चाहते हैं।

Answer 3

मैं आमतौर पर अतिप्रवाह का उपयोग करें। इस मामले में, मैं हार मानता हूं और बस एक अतिरिक्त div जोड़ता हूं।

<div id="parent" style="position:relative;"> 
    <!-- floating divs here --> 
    <div id="child" style="position:absolute;"></div> 
    <div style="clear:both"></div> 
</div> 

Answer 4

नीचे दिया गया कोड एक आकर्षण की तरह काम करता है।

<div id="grandparent" style="position:relative;"> 
    <div id="parent" style="overflow:hidden;"> 
     <div id="child" style="position:absolute;"> 
     </div> 
    </div> 
</div> 

Answer 5

थर्डॉट का समाधान वास्तव में एक अच्छा विचार है।

यहाँ एक स्पष्ट उदाहरण है: http://jsfiddle.net/y9dtL68d/

एचटीएमएल

<div id="grandparent"> 
    <div id="parent"> 
     <p>this has a lot of content which ...</p> 
     <p>this has a lot of content which ...</p> 
     <p>this has a lot of content which ...</p> 
     <p>this has a lot of content which ...</p> 
     <p>this has a lot of content which ...</p> 
     <p>this has a lot of content which ...</p> 
     <p>this has a lot of content which ...</p> 
    </div> 
    <div id="child"> 
     dudes 
    </div>  
</div> 

सीएसएस

#grandparent { 
    position: relative; 
    width: 150px; 
    height: 150px; 
    margin: 20px; 
    background: #d0d0d0; 
} 
#parent { 
    width: 150px; 
    height: 150px; 
    overflow:hidden; 
} 
#child { 
    position: absolute; 
    background: red; 
    color: white; 
    left: 100%; 
    top: 0; 
}