jQuery: स्थिति और (ऑफसेट) के बीच अंतर

178

बीच क्या अंतर है position()और offset()? मैंने एक क्लिक ईवेंट में निम्नलिखित करने की कोशिश की:

console.info($(this).position(), $(this).offset());

और वे बिल्कुल उसी तरह लौटते दिख रहे हैं ... (क्लिक किया गया तत्व टेबल में टेबल सेल के भीतर है)

jquery positioning

— Svish
स्रोत

215

चाहे वे समान हों, संदर्भ पर निर्भर करते हैं।

positionऑफसेट अभिभावक के सापेक्ष एक {left: x, top: y}वस्तु देता है
offsetदस्तावेज़ के सापेक्ष एक {left: x, top: y}वस्तु लौटाता है ।

जाहिर है, अगर दस्तावेज़ ऑफसेट अभिभावक है, जो अक्सर होता है, तो ये समान होंगे। ऑफसेट माता पिता "के सबसे करीब तैनात युक्त तत्व है।"

उदाहरण के लिए, इस दस्तावेज़ के साथ:

 <div style="position: absolute; top: 200; left: 200;">
     <div id="sub"></div>
 </div>

फिर $('#sub').offset() वसीयत {left: 200, top: 200}, लेकिन उसकी .position()होगी {left: 0, top: 0}।

— डेविड हेडलंड
स्रोत

2

तो ऑफसेट अभिभावक पहला अभिभावक होता है जिसके पास स्थिति पूर्ण होती है? या?

— श्वेत

1

@ सविश: वाह, क्या मुझे वास्तव में कोड इंडेंट याद था? संपादन के लिए धन्यवाद। हां, ऑफसेट अभिभावक निकटतम तैनात माता-पिता है। वह तत्व है, जिसमें पूर्ण, सापेक्ष या स्थिर (लेकिन स्थिर नहीं) स्थिति के साथ एक तत्व है। यह एक jQuery या यहां तक कि एक जावास्क्रिप्ट चीज़ नहीं है, आपके पास css में समान व्यवहार है: यदि आप sub0: 0 पर पूर्ण स्थिति देना चाहते थे , तो यह ऑफसेट अभिभावक के ऊपरी बाएं कोने में होगा।

— डेविड हेडलंड

1

FYI करें, .position1.12.0 => github.com/jquery/jquery/issues/1708

— retrovertigo

सहज दृष्टिकोण के विपरीत नहीं है? यह तो मनमानी है! मेरे लिए एक पूर्ण "बिंदु" एक स्थिति है। एक रिश्तेदार "बिंदु" एक ऑफसेट है।

— सैंडबर्ग

28

.Offset () विधि हमें एक तत्व की वर्तमान स्थिति को पुनः प्राप्त करने की अनुमति देता है दस्तावेज़ के सापेक्ष । इसके विपरीत .position () , जो ऑफसेट अभिभावक के सापेक्ष वर्तमान स्थिति को पुनः प्राप्त करता है । जब वैश्विक जोड़-तोड़ के लिए (विशेष रूप से, ड्रैग-एंड-ड्रॉप को लागू करने के लिए), .offset () के लिए किसी नए तत्व को शीर्ष पर रखा जाता है, तो यह अधिक उपयोगी होता है।

स्रोत: http://api.jquery.com/offset/

— JANDY
स्रोत

3

जैसा कि ऊपर पूछा गया है, ऑफसेट अभिभावक क्या माना जाता है? ऐसा लगता है कि कॉलिंग पोज़िशन () दूसरे डिव के अंदर पहली डीवाई पर हमेशा 0,0 नहीं लौटती है - तब भी जब कोई दूसरी स्टाइल या पोजिशनिंग नहीं होती है।

— कोकोडको

2

jquery.offsetParent (): api.jquery.com/offsetparent "निकटतम पूर्वज तत्व प्राप्त करें जो तैनात है।"

— कर्टिस येलोप

-6

दोनों कार्य दो गुणों के साथ एक सादा वस्तु लौटाते हैं: चौड़ाई और ऊंचाई।

ऑफ़सेट () दस्तावेज़ के सापेक्ष स्थिति को संदर्भित करता है।

स्थिति () अपने मूल तत्व के सापेक्ष स्थिति को संदर्भित करता है

लेकिन जब वस्तु की सीएसएस स्थिति "निरपेक्ष" है, तो दोनों कार्य चौड़ाई = 0 और ऊंचाई = 0 लौटाएंगे

— dwoutsourcing
स्रोत

6

सुधार: ऑफसेट और स्थिति एक वस्तु को बाएं और शीर्ष गुणों के साथ लौटाती है, न कि चौड़ाई और ऊंचाई।

— जॉर्ज ओलिवारेस