2013-05-08 9 views
7

मेरे पास <div> है जिसकी चौड़ाई 100% है। जब मैं position:fixed जोड़ता हूं, तो चौड़ाई 16px बड़ा हो जाती है।निश्चित स्थिति किसी तत्व की चौड़ाई को क्यों बदलती है?

मैंने देखा कि शरीर पर, 8px मार्जिन सभी तरफ हैं, इसलिए मुझे लगता है कि position:fixed किसी भी तरह से उस टैग टैग के मार्जिन को अनदेखा कर रहा है जिसमें यह निहित है।

मैंने MDN Reference पर देखा लेकिन यह कुछ भी नहीं मिला जो बता रहा है कि क्या हो रहा है।

position:fixed<div> के बारे में क्या बदल गया है जो इस व्यवहार का कारण बनता है?

उदाहरण: http://jsfiddle.net/UpeXV/

+1

जंगली अनुमान: 100% 'शायद खिड़की चौड़ाई अब उपयोग कर रहा है: अब आपको तो' 'चौड़ाई body' की गद्दी के साथ काम कर रहे हैं। –

+0

अपेक्षित व्यवहार की तरह लगता है? यह दस्तावेज़ की चौड़ाई के 100% तक फैल रहा है। –

+0

@ पेक्का 웃 मैं यह नहीं कह रहा हूं कि यह अपेक्षित व्यवहार नहीं है, मैं बस समझने की कोशिश कर रहा हूं * क्यों * यह हो रहा है –

उत्तर

10

body स्वचालित रूप से 8px का मार्जिन है। तो जब आप अपने तत्व के width को 100% पर सेट करते हैं, तो यह दोनों तरफ शरीर की चौड़ाई बन जाती है, 8px कम होती है।

लेकिन जब आप तत्व position:fixed देते हैं, तो यह अब शरीर के सापेक्ष सेट नहीं है बल्कि व्यूपोर्ट पर है, जिसमें मार्जिन नहीं है। तो width अब व्यूपोर्ट की चौड़ाई है, जो 2 * 8px व्यापक है - 16px जो आप देखते हैं।

यहाँ W3 documentation on the subject:

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

+0

बस मुझे संदेह था, धन्यवाद :) –

+0

इससे मुझे यह समझने में मदद मिलती है कि सीएसएस में स्थिति बदलने के समय वास्तव में क्या चल रहा है –

+0

@ChrisB, मदद करने में खुशी है! – ASGM

0

यह है जब आप position:fixed को एक तत्व सेट की तरह दिखता है, वह अपने माता-पिता के बजाय व्यूपोर्ट की चौड़ाई पर ले जाता है।

फिक्स्ड पोजीशनिंग पूर्ण स्थिति के समान है, अपवाद के साथ कि तत्व युक्त ब्लॉक व्यूपोर्ट है।

MDN CSS Position Reference

अपनी टिप्पणी के लिए धन्यवाद।

1

यह तय तत्वों के लिए डिफ़ॉल्ट व्यवहार है, क्योंकि एक निश्चित तत्व अपने निकटतम स्थिति में माता-पिता लेकिन व्यूपोर्ट, इस प्रकार खिड़की में तय हो रही करने के लिए संदर्भ में ही बोध नहीं है। 16px अधिक चौड़ाई तथ्य से आती है, जैसा कि आपने स्वयं को बताया है कि शरीर का 8px का डिफ़ॉल्ट मार्जिन है।

1

यदि आपको 100% चौड़ाई होने के लिए निश्चित तत्व की आवश्यकता है, और आप अभी भी अंतरिक्ष चाहते हैं, तो आप box-sizing: border-box का उपयोग करने पर विचार कर सकते हैं। फिर स्पेस बनाने के लिए मार्जिन की बजाय पैडिंग का उपयोग करें। यह निश्चित तत्व को बिना पृष्ठ के चौड़ाई को फैलाने की अनुमति देगा। मार्जिन और सीमाओं और पैडिंग को हमेशा तत्व के आयामों में जोड़ा जाता है, जब तक कि आप border-box मॉडल का उपयोग न करें, जिसमें मामले की चौड़ाई में पैडिंग और सीमाएं शामिल होंगी।

देखें: http://css-tricks.com/box-sizing/

संबंधित मुद्दे