स्थिति पूर्ण पृष्ठ को ओवरफ़्लो क्यों बनाती है?

Question

मेरी समझ एक बार एक तत्व पूर्ण रूप से स्थित है (यहां तक ​​कि ऋणात्मक स्थिति मान के साथ), यह सामान्य सामग्री प्रवाह से पूरी तरह से बाहर हो जाएगा। लेकिन यह अभी भी पृष्ठ को बहने क्यों बना देता है? जब आप नीचे कोड स्निपेट चलाते हैं, क्षैतिज स्क्रॉलबार प्रकट होता है, मैंने सोचा कि यह वहां नहीं होना चाहिए।

.relative { 
 
    position: relative; 
 
    background: pink; 
 
} 
 
.absolute { 
 
    position: absolute; 
 
    top: 0; 
 
    right: -100px; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: rgba(0,0,0,.5); 
 
}

<div class="relative"> 
 
    Placeholder <div class="absolute"></div> 
 
</div>

Answer 1

मुझे लगता है कि मुझे पता है कि यह प्रश्न कहां से आता है। जब आप क्षैतिज स्क्रॉलबार के बिना स्क्रीन को बंद करना चाहते हैं तो स्क्रीन के बाएं किनारे पर (नकारात्मक) पूर्ण स्थिति का उपयोग करने वाले लोगों द्वारा आपको भ्रमित होना चाहिए। स्लाइडर, मेनू और मोडल के लिए यह एक आम तकनीक है।

बात यह है कि एक नकारात्मक बाएं आवंटन शरीर पर अतिप्रवाह नहीं दिखाता है, जबकि नकारात्मक सही आवंटन करता है। बहुत तार्किक नहीं है ... मुझे पता है।

इसे दर्शाने के लिए मैं बाईं तरफ के पूर्ण तत्व के साथ एक कलम बनाया: left: -100px;http://codepen.io/anon/pen/vGRxdJ और दाईं तरफ पूर्ण तत्व के साथ एक कलम: right: -100px;http://codepen.io/anon/pen/jqzBZd।

मुझे आशा है कि यह आपके भ्रम को दूर करेगा।

ऐसा क्यों होता है: मैंने हमेशा यह समझा है कि स्क्रीन के शीर्ष बाएं कोने x: 0, y: 0: समन्वय प्रणाली की उत्पत्ति है जिसमें केवल सकारात्मक मान शामिल हैं (जो आरटीएल में क्षैतिज रूप से प्रतिबिंबित होता है मामला)। इस समन्वय प्रणाली में नकारात्मक मान 'ऑफ-कैनवास' हैं और इस प्रकार 'ऑन-कैनवास' तत्व करते समय, कोई स्क्रॉलबार की आवश्यकता नहीं होती है। दूसरे शब्दों में: ऑन-कैनवास तत्व आपके पृष्ठ को बड़ा कर देंगे और आपका दृश्य स्वचालित रूप से स्क्रॉल करने योग्य बनाएंगे (जब तक कि अन्यथा निर्देश न दिया जाए), जबकि ऑफ-कैनवास तत्व नहीं होंगे।

Answer 2

absolute: तत्व दस्तावेज़ के प्रवाह से निकाल दिया जाता है और जैसे कि वह भी वहां नहीं है, जबकि अन्य सभी स्थितीय गुण उस पर काम करेंगे अन्य तत्वों व्यवहार करेगा।
CSS-Tricks

इसका मतलब है कि पेज के लेआउट और आकार और अन्य तत्वों की स्थिति को बदलने नहीं होंगे। जैसा कि हमने देखा है, पृष्ठ की चौड़ाई बदलती है, लेकिन इसे लेआउट नहीं कहा जाता है।

पृष्ठ लेआउट ग्राफिक डिज़ाइन का हिस्सा है जो किसी पृष्ठ पर दृश्य तत्वों की व्यवस्था में कार्य करता है। यह आम तौर पर रचना के संगठनात्मक सिद्धांतों [...]
Wikipedia

जब चौड़ाई परिवर्तन, तत्वों की संरचना में परिवर्तन नहीं करता (कम से कम, इस मामले में), इसलिए लेआउट परिवर्तन नहीं करता है शामिल है। चौड़ाई बदलती है, लेकिन ऐसा होने वाला है। यदि आप अब खुद से पूछ रहे हैं: "लेकिन क्यों?", अगली बिट पढ़ें।

"क्यों" प्रश्नों के बारे में: हमेशा एक असली क्यों नहीं है; यह वही तरीका है, और आप या तो इसका इस्तेमाल करते हैं या आप अभी भी बैठते हैं और सवाल करते हैं। यह किसी भी समस्या का इतना नहीं है। तत्व खिड़की को बहने में सक्षम नहीं हैं, यह एक समस्या होगी। More about "why" questions. मैं यह नहीं कह रहा हूं कि सभी "क्यों" प्रश्न खराब हैं, लेकिन यदि आप पूछते हैं कि कोई निश्चित सुविधा मौजूद है तो कोई अच्छा जवाब नहीं हो सकता है, लेकिन केवल एक अच्छा या पर्याप्त समाधान हो सकता है।

समाधान:overflow-x:hidden शरीर के सीएसएस में जोड़ें। जब आप इसे .relative पर जोड़ते हैं, तो .absolute का एक अलग हिस्सा भी काटा जाएगा, क्योंकि .absolute में अधिक ऊंचाई है।

जब आप overflow-x:hiddenbody के बाहर सबकुछ जोड़ते हैं तो पूरी चौड़ाई के साथ अदृश्य हो जाएगा, और इससे पहले कि यह पृष्ठ को नहीं बढ़ाएगा।

body { 
 
    overflow-x:hidden; 
 
} 
 
.relative { 
 
    position: relative; 
 
} 
 
.absolute { 
 
    position: absolute; 
 
    right: -100px; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: grey; 
 
}

<div class="relative"> 
 
    <div class="absolute"></div> 
 
</div>

Answer 3

आप पूरी तरह एक तत्व की स्थिति हैं, hight और रैपिंग तत्व की चौड़ाई उसकी सामग्री पर निर्भर करता है। यहां तक ​​कि overflow।

रैपिंग तत्व को छिपाने और स्क्रॉल बार को हटाने के लिए, आपको शरीर टैग के overflow को हटा देना चाहिए।

body { 
 
    overflow: hidden; 
 
} 
 
.relative { 
 
    position: relative; 
 
} 
 
.absolute { 
 
    position: absolute; 
 
    right: -100px; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: grey; 
 
}

<div class="relative"> 
 
    <div class="absolute"></div> 
 
</div>

Answer 4

क्या आपको लगता है कि आपको दो बातें साथ कर सकते हैं के लिए उम्मीद कर रहे हैं।या तो body { overflow-x: hidden; } बनाएं या absolute div से position:fixed बनाएं।

अब अपने प्रश्न के उत्तर दें।

प्रश्न: कारण है कि यह अभी भी पेज से ऊपर जाने का है?

क्योंकि position:absolute निकटतम स्थित पूर्वजों के सापेक्ष स्थित है।

और position:absolute div दाएं/नीचे तक बहने पर दाएं या नीचे स्क्रॉल करेगा।

चेक Fiddle

कहाँ position:fixed व्यूपोर्ट में किस स्थिति में है। यह किसी भी तरफ बाएं/ऊपर/नीचे/दाएं तरफ बहने वाला नहीं होगा। Fiddle

Hereposition

पूर्ण स्थिति को स्पष्ट करने के लिए कुछ लिंक: यह स्क्रॉल करेगा, लेकिन पेज प्रवाह से बाहर है। आमतौर पर मूल स्थिति से स्थानांतरित होता है।

फिक्स्ड पोजीशनिंग: यह स्क्रॉल नहीं करेगा, और प्रवाह से बाहर होगा। आमतौर पर मूल स्थिति से स्थानांतरित होता है।

Reference

body { 
 
    overflow-x: hidden; 
 
} 
 

 
.relative { 
 
    position: relative; 
 
    background: pink; 
 
} 
 
.absolute { 
 
    position: absolute; 
 
    top: 0; 
 
    right: -100px; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: rgba(0,0,0,.5); 
 
}

<div class="relative"> 
 
    Placeholder <div class="absolute"></div> 
 
</div>

आशा है कि यह मदद करता है।

Answer 5

आपकी समझ है जब एक तत्व पूर्ण रूप से स्थित होता है (यहां तक ​​कि नकारात्मक स्थिति मान के साथ), यह सामान्य सामग्री प्रवाह से पूरी तरह से बाहर हो जाएगा।

आप सही हैं, लेकिन, इसे एक बार फिर पढ़ें।

वाक्य "यह पूरी तरह से सामान्य सामग्री से बाहर प्रवाह होगा" इसका मतलब यह नहीं है कि यह छिपा अगर यह अपने कंटेनर से बाहर हो जाएंगे होगा।

यदि आप इसे कंटेनर से छिपाना चाहते हैं, तो माता-पिता अतिप्रवाह होना चाहिए: छुपा।

यहाँ अपने मामले में यह क्योंकि डिफ़ॉल्ट अतिप्रवाह संपत्ति मूल्यों से ऊपर जाने का एक पेज बना दिया है दिखाई है। यह W3C के अनुसार होना चाहिए।

W3C: https://www.w3.org/TR/css3-positioning/#abs-pos

पूर्ण स्थिति मॉडल में, एक बॉक्स स्पष्ट रूप से अपनी धारक ब्लॉक के संबंध में ऑफसेट है। इसे सामान्य प्रवाह से पूरी तरह हटा दिया जाता है (इसका बाद में भाई बहनों पर कोई प्रभाव नहीं पड़ता)। एक बिल्कुल स्थित बॉक्स सामान्य प्रवाह वाले बच्चों के लिए एक नया युक्त ब्लॉक स्थापित करता है और पूरी तरह से (लेकिन निश्चित नहीं है या पृष्ठ) स्थित वंशज हैं। हालांकि, एक पूरी तरह से तैनात तत्व की सामग्री किसी भी अन्य बक्से के आसपास बहती नहीं है। ओवरलैपिंग बक्से के ढेर के स्तर के आधार पर, वे किसी अन्य बॉक्स की सामग्री को अस्पष्ट कर सकते हैं (या खुद को अस्पष्ट कर सकते हैं)।

MDN: https://developer.mozilla.org/en/docs/Web/CSS/position

तत्वों है कि अपेक्षाकृत तैनात कर रहे हैं अभी भी दस्तावेज़ में तत्वों के सामान्य प्रवाह में माना जाता है। इसके विपरीत, एक तत्व जो पूरी तरह से स्थित है, प्रवाह से बाहर निकाला जाता है और इस प्रकार अन्य तत्वों को रखने के दौरान कोई जगह नहीं लेती है। बिल्कुल स्थित तत्व तत्व निकटतम स्थित पूर्वजों (गैर स्थैतिक) के सापेक्ष स्थित है। यदि एक स्थित पूर्वजों का अस्तित्व नहीं है, तो प्रारंभिक कंटेनर का उपयोग किया जाता है।

भले ही आप अपना बनाते हैं। संबंधित निश्चित चौड़ाई और सेट ओवरफ़्लो तक: छुपा हुआ क्षैतिज भी स्क्रॉल प्रकट होता है।

नीचे देखें:

.relative { 
 
    position: relative; 
 
    background: pink; 
 
    width: 500px; 
 
    overflow: auto; 
 
} 
 
.absolute { 
 
    position: absolute; 
 
    top: 0; 
 
    right: -100px; 
 
    width: 200px; 
 
    height: 100px; 
 
    background: rgba(0,0,0,.5); 
 
}

<div class="relative"> 
 
    Placeholder <div class="absolute"></div> 
 
</div>

Answer 6

मैं सीएसएस 2.1 डॉक्स के माध्यम से पढ़ा है (CSS3 के दृश्य स्वरूपण वर्गों परिवर्तन नहीं किया), और इस रूप में स्पष्ट रूप में मैं मिल सकता है।

Section 2.3.1

सभी मीडिया के लिए, अवधि कैनवास का वर्णन करता है "अंतरिक्ष जहां स्वरूपण संरचना प्रदान की गई है।" कैनवास अंतरिक्ष के प्रत्येक आयाम के लिए अनंत है, लेकिन आम तौर प्रतिपादन कैनवास के एक परिमित क्षेत्र, लक्ष्य मध्यम के अनुसार उपयोगकर्ता एजेंट द्वारा स्थापित के भीतर होती है।

निरंतर मीडिया के लिए

Section 9.1

उपयोगकर्ता एजेंट आम तौर पर उपयोगकर्ताओं को एक व्यूपोर्ट (एक खिड़की या अन्य दिखाई देने वाले क्षेत्र स्क्रीन पर) के माध्यम से जो उपयोगकर्ताओं को एक दस्तावेज़ से परामर्श प्रदान करते हैं।

जब व्यूपोर्ट कैनवास जिस पर दस्तावेज़ प्रदान की गई है के क्षेत्र से छोटा होता है, उपयोगकर्ता एजेंट एक स्क्रॉल तंत्र की पेशकश करनी चाहिए।

इसलिए, जब आप एक बिल्कुल तैनात तत्व जोड़ है, भले ही वह अपने धारक ब्लॉक की चौड़ाई में वृद्धि नहीं करता है, यह कैनवास का आकार बढ़ जाता है। ब्राउज़र आपको पूरे कैनवास को देखने की अनुमति देने के लिए एक स्क्रॉलिंग तंत्र प्रदान करता है।

स्पष्ट होने के लिए, स्क्रॉलिंग नहीं होती है क्योंकि <div class="relative"> व्यापक हो गया है, या यहां तक ​​कि <body> या कुछ अन्य ब्लॉक व्यापक हो गया है। ऐसा इसलिए था क्योंकि अंतर्निहित कैनवास जिस पर दस्तावेज़ प्रस्तुत किया गया था बड़ा हो गया।

Answer 7

आप अपेक्षाकृत स्थिति तत्व के लिए छिपा हुआ अतिप्रवाह जोड़ सकते हैं और अपनी इच्छित ऊंचाई दे सकते हैं। मेरे परिप्रेक्ष्य से यह सबसे अच्छा समाधान है। और पूरी तरह से स्थित div के साथ चारों ओर खेलते हैं।

.relative { 
    position: relative; 
    background: pink; 
    overflow:hidden; 
} 
.absolute { 
    position: absolute; 
    top: 0; 
    right: -100px; 
    width: 200px; 
    height: 100px; 
    background: rgba(0,0,0,.5); 
}