पैरेंट फिक्स्ड, पैरेंट ओवरफ्लो: प्रिंसिपल बग

Question

मुझे नहीं पता कि कोई समस्या है या नहीं, लेकिन मैं सोच रहा था कि overflow:hiddenfixed माता-पिता/बच्चों के तत्व पर क्यों काम नहीं करता है।

सीएसएस और एचटीएमएल:

.parent{ 
 
    position:fixed; 
 
    overflow:hidden; 
 
    width:300px; 
 
    height:300px; 
 
    background:#555; 
 
} 
 
.children{ 
 
    position:fixed; 
 
    top:200px; 
 
    left:200px; 
 
    width:150px; 
 
    height:150px; 
 
    background:#333; 
 
}

<div class="parent"> 
 
    <div class="children"> 
 
    </div> 
 
</div>

लाइव डेमो:

यहाँ एक उदाहरण है jsFiddle

Answer 1

एक निश्चित स्थिति तत्व आर के साथ तय हो गई है क्योंकि व्यूपोर्ट की तलाश करें, एक और तत्व नहीं। इसलिए चूंकि व्यूपोर्ट इसे काट नहीं रहा है, इसलिए अतिप्रवाह अप्रासंगिक हो जाता है।

स्थिति के साथ स्थिति और एक तत्व के आयामों जबकि: पूर्ण अपने धारक ब्लॉक के सापेक्ष हैं, स्थिति और स्थिति के साथ एक तत्व के आयाम: तय हमेशा सापेक्ष प्रारंभिक युक्त ब्लॉक करने के लिए कर रहे हैं। यह आमतौर पर व्यूपोर्ट है: ब्राउज़र विंडो या पेपर का पृष्ठ बॉक्स।

रेफरी: http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning

Answer 2

स्थिर स्थिति तत्व ब्राउज़र विंडो के सापेक्ष तैनात कर रहे हैं, तो पेरेंट तत्व मूल रूप से अप्रासंगिक है।

प्रभाव आप चाहते हैं, जहां माता-पिता क्लिप पर overflow बच्चे, position: absolute बजाय का उपयोग पाने के लिए: http://jsfiddle.net/DBHUv/1/

Answer 3

मैं एक द्रव लेआउट, जहां अधिकार स्तम्भ एक निश्चित था के साथ एक समान, काफी जटिल समस्या थी चौड़ाई और बाईं ओर एक लचीली चौड़ाई थी। मेरे निश्चित कंटेनर में लचीली कॉलम के समान चौड़ाई होना चाहिए। यहाँ मेरी समाधान है:

एचटीएमएल

<div id="wrapper"> 
    <div id="col1"> 
    <div id="fixed-outer"> 
     <div id="fixed-inner">inner</div> 
    </div> 
    COL1<br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div> 
    <div id="col2">COL2</div> 
</div> 

सीएसएस

#wrapper { 
    padding-left: 20px; 
} 

#col1 { 
    background-color: grey; 
    float: left; 
    margin-right: -200px; /* #col2 width */ 
    width: 100%; 
} 

#col2 { 
    background-color: #ddd; 
    float: left; 
    height: 400px; 
    width: 200px; 
} 

#fixed-outer { 
    background: yellow; 
    border-right: 2px solid red; 
    height: 30px; 
    margin-left: -420px; /* 2x #col2 width + #wrapper padding-left */ 
    overflow: hidden; 
    padding-right: 200px; /* #col2 width */ 
    position: fixed; 
    width: 100%; 
} 

#fixed-inner { 
    background: orange; 
    border-left: 2px solid blue; 
    border-top: 2px solid blue; 
    height: 30px; 
    margin-left: 420px; /* 2x #col2 width + #wrapper padding-left */ 
    position: absolute; 
    width: 100%; 
} 

लाइव डेमो: http://jsfiddle.net/hWCub/

Answer 4

आप एक निश्चित posi क्लिप करने के लिए सीएसएस clip: rect(top, right, bottom, left); उपयोग करने पर विचार कर सकता है एक माता पिता के लिए tioned तत्व। http://jsfiddle.net/lmeurs/jf3t0fmf/ पर डेमो देखें।

सावधान रहें, देखभाल के साथ उपयोग करें!

हालांकि क्लिप शैली व्यापक रूप से समर्थित है, मुख्य नुकसान कर रहे हैं:

1. माता पिता की स्थिति स्थिर या रिश्तेदार (एक एक अपेक्षाकृत तैनात कंटेनर के अंदर एक बिल्कुल तैनात माता-पिता का उपयोग कर सकते हैं) नहीं हो सकता है;
2. रेक्ट निर्देशांक प्रतिशत का समर्थन नहीं करते हैं, हालांकि auto मान 100%, यानी बराबर है। clip: rect(auto, auto, auto, auto);;
3. बाल तत्वों के साथ संभावनाएं कम से कम IE11 & Chrome34, यानी सीमित हैं। हम बच्चे तत्वों की स्थिति को सापेक्ष या पूर्ण में सेट नहीं कर सकते हैं या पैमाने जैसे CSS3 रूपांतरण का उपयोग नहीं कर सकते हैं।

अधिक जानकारी के लिए http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/ देखें।

संपादित करें: क्रोम की स्थिति को संभालने के लिए लगता है और CSS3 के बच्चे तत्वों एक बहुत बेहतर जब backface-visibility को लागू करने पर बदल देती है, तो बस यकीन है कि हम जोड़े जाने के लिए:

-webkit-backface-visibility: hidden; 
-moz-backface-visibility: hidden; 
backface-visibility: hidden; 

मुख्य चाइल्ड तत्व को

।

यह भी ध्यान रखें कि यह पुराने/मोबाइल ब्राउज़र द्वारा पूरी तरह से समर्थित नहीं है या इसमें कुछ अतिरिक्त प्रयास हो सकते हैं। bellafuchsia.com पर मेनू के लिए हमारे कार्यान्वयन देखें।

1. आईई 8 मेनू को अच्छी तरह से दिखाता है, लेकिन मेनू लिंक क्लिक करने योग्य नहीं हैं;
2. आईई 9 गुना के नीचे मेनू नहीं दिखाता है;
3. आईओएस सफारी < 5 मेनू को अच्छी तरह से प्रदर्शित नहीं करता है;
4. आईओएस सफारी 5+ स्क्रॉलिंग के बाद स्क्रॉल पर क्लिप की गई सामग्री को दोहराता है;
5. एफएफ (कम से कम 13+), आईई 10 +, क्रोम और क्रोम एंड्रॉइड के लिए क्रोम अच्छा लगता है।

संपादित करें 2014-11-02: डेमो यूआरएल अपडेट किया गया है।

Answer 5

2016 अद्यतन:

आप के रूप Coderwall पर देखा, एक नया स्टैकिंग प्रसंग बना सकते हैं:

<div style="transform: translate3d(0,0,0);overflow:hidden"> 
    <img style="position:fixed; ..." /> 
</div> 

कौन सा http://dev.w3.org/csswg/css-transforms/#transform-rendering

को संदर्भित करता है तत्वों जिसका लेआउट से नियंत्रित होता है के लिए सीएसएस बॉक्स मॉडल, एक स्टैकिंग संदर्भ और एक युक्त ब्लो दोनों के निर्माण में परिवर्तन परिणामों के लिए किसी भी अन्य के अलावा कोई मूल्य नहीं है सी.के.। ऑब्जेक्ट निश्चित स्थित वंशजों के लिए एक ब्लॉक के रूप में कार्य करता है।

Answer 6

आप निश्चित स्थिति तत्व पर अतिप्रवाह को छिपाने के लिए चाहते हैं, तो सबसे सरल दृष्टिकोण मैंने पाया एक कंटेनर तत्व के अंदर तत्व रखें, और निहित तत्व के बजाय उस तत्व को position:fixed और overflow:hidden लागू (आप के लिए है इस काम के लिए निहित तत्व से position:fixed को हटाना होगा)। निश्चित कंटेनर की सामग्री को उम्मीद के रूप में बंद कर दिया जाना चाहिए।

मेरे मामले में मुझे एक निश्चित स्थिति तत्व पर object-fit:cover का उपयोग करने में परेशानी हो रही थी (यह overflow:hidden पर ध्यान दिए बिना पृष्ठ निकाय की सीमाओं के बाहर फैल रहा था)। कंटेनर पर overflow:hidden के साथ एक निश्चित कंटेनर के अंदर रखकर समस्या को हल किया गया।