मुझे नहीं लगता कि यह jQuery के साथ एक बग है - ऐसा लगता है कि एच 1 मार्जिन और बॉडी तत्व के बीच एक वैध संबंध है?
हाँ: शरीर और h1 के हाशिये collapsing हैं, इसलिए न केवल h1 प्राप्त उसके डिफ़ॉल्ट अंतर से नीचे स्थानांतरित कर दिया है, लेकिन इतना शरीर करता है। यह वह जगह है तुम क्यों इन टिप्पणियों बनाने में सक्षम थे:
- समस्या का हल शरीर पर एक सीमा निर्धारित करना - अजीब व्यवहार लगता है, लेकिन ब्राउज़रों में संगत है? (नहीं एक व्यवहार्य समाधान)
- एच 1 मार्जिन निकाला जा रहा है समस्या (नहीं एक व्यवहार्य समाधान) को हल करती है
वैसे भी, position: relative करने के लिए शरीर की स्थापना करके, आप पूरी तरह से शरीर की साथ ही स्थिति #overlay कह रहे हैं मूल के रूप में शीर्ष ऑफसेट। आपकी स्क्रिप्ट तब #existing के ऑफसेट के सापेक्ष इसे ले जाती है। इसके offsetTop का मान व्यूपोर्ट के सापेक्ष है, जिसकी गणना इस बॉक्स की स्थिति के आधार पर की जाती है ... जो स्वयं एच 1 के सापेक्ष है क्योंकि यह सामान्य प्रवाह में सीधे एच 1 का पालन करता है।
क्योंकि एच 1 और शरीर के तत्वों के मार्जिन गिर रहे हैं, उनके पास समान रेंडर मार्जिन हैं।क्या तब होता दोहरा है:
#existing सामान्य प्रवाह में अपनी निम्नलिखित भाई के रूप में एच 1 से नीचे धक्का दे दिया गया है। यह व्यूपोर्ट से अपना ऑफसेट बढ़ाता है (आपके कोडपेन टेस्ट केस में, यह पूर्वावलोकन फलक का शीर्ष है), जिसके परिणामस्वरूप offsetTop अधिक हो रहा है।
शरीर position: relative पर सेट होने पर, #overlay समाप्त होता है अपने मूल शरीर है, जो खुद भी कारण h1 के अंतर से गिर करने के लिए नीचे धक्का दे दिया गया है कि करने के लिए सेट के साथ तैनात हो रही। इससे इसकी उत्पत्ति का शीर्ष ऑफसेट बढ़ जाता है, जो तब नहीं होता जब आप शरीर को नहीं रखते थे, क्योंकि #overlay इसके बजाय व्यूपोर्ट की उत्पत्ति का उपयोग करता है, जो कभी नहीं चलता है।
व्यूपोर्ट के ऊपर से #existing की दूरी के अपने मूल से #overlay की भरपाई पर जोड़ा जाता है,, शरीर जा रहा है कि इस आशय हो जाती है।
सारांश में: मार्जिन पतन के कारण, ब्राउज़र को एच 1 और शरीर दोनों में नीचे की ओर बदलाव के लिए खाते हैं। एच 1 #existing को प्रभावित करता है और इसके बदले में offsetTop है, जबकि शरीर #overlay को प्रभावित करता है जब आप अपेक्षाकृत स्थिति रखते हैं। तो स्थानांतरण प्रभाव दो गुना दिखाई देता है।
एक त्वरित समाधान के रूप में आप #overlay offsetting के प्रयोजनों के लिए #existing की ऑफसेट से h1 मार्जिन घटाना कर सकते हैं:
$("#overlay").css({
left: $("#existing").offset().left - $("h1").offset().left,
top: $("#existing").offset().top - $("h1").offset().top
})
Updated example
सूचना ऊपर $(document.body)$("h1") के बजाय का उपयोग कर कि नहीं काम। ऐसा इसलिए है क्योंकि मार्जिन पतन पूरी तरह से एक प्रतिपादन प्रभाव है, और वास्तव में शरीर के ऑफसेट को प्रभावित नहीं करता है जब तक कि आप इसे अपना मार्जिन न दें (दूसरे शब्दों में, शरीर मार्जिन अभी भी शून्य पर कंप्यूटिंग कर रहे हैं, इसलिए डोम कोई भी बुद्धिमान नहीं है)।
सीधे हाथ में समस्या से संबंधित नहीं है, लेकिन वैसे भी संबोधित कर लायक:
- एच 1 से मार्जिन को बदलने के लिए शरीर 0,0 से की जाती है, जहां लगता है - भले ही शरीर पर पृष्ठभूमि में बढ़त के लिए सभी तरह फैली हुई है, और यह offsetTop संपत्ति रिपोर्ट 0
इस बात का पहला और अंतिम भागों मधुमक्खी है है एन ऊपर संबोधित किया।
शरीर की पृष्ठभूमि के लिए: जबकि यह किनारे तक सभी तरह तक फैलता प्रतीत होता है, यह विस्तारित पृष्ठभूमि वास्तव में शरीर से संबंधित नहीं है - यह शरीर से प्रचारित होती है, और इस प्रकार मूल तत्व (एचटीएमएल) और व्यूपोर्ट। स्पष्टीकरण के लिए this answer देखें।
ओह और यह:
यह एक बग क्योंकि व्यवहार एफएफ, क्रोम, IE9 और सफारी Win7 पर भर में लगातार है नहीं है।
मुझे मुस्कुराया।क्योंकि एक बार के लिए, कोई यह कहने में सही है।
इसे तारांकित करना क्योंकि मैं गलती से इसे बाहर निकालने में बहुत लंबा रहा। धन्यवाद। मैं वास्तव में अब बोरी मारा जाना चाहिए :) – BoltClock