मुझे jQuery में ऑफसेट और स्थिति में समान मूल्य क्यों मिल रहा है?

Question

मैंने अनुच्छेद टैग के अंदर एक अवधि डाली है, अब स्थिति शीर्ष 0 के रूप में दिखाना चाहिए और ऑफसेट को कुछ अन्य मूल्य दिखाना चाहिए (दस्तावेज़ से गणना करने की आवश्यकता है), लेकिन मुझे दोनों में समान मूल्य मिल रहा है ...

मैं गलत हूँ?

एचटीएमएल:

<div></div> 
<p>paragraph<span>span</span>paragraph</p> 

Jquery:

$('span').click(function(){ 
console.log($(this).position().top,$(this).offset().top) 
}) 

CSS: 

p{ 
    color:green; 
} 

span{ 
    color:red; 
} 

div{ 
    height:100px; 
    border:2px solid blue; 
} 

jsfiddle here

Answer 1

docs

.position() विधि से

हमें एक तत्व relative to the offset parent की वर्तमान स्थिति को पुनः प्राप्त करने की अनुमति देता है।

.offset() के साथ इसकी तुलना करें, जो retrieves the current position relative to the document है।

जब किसी अन्य के पास एक नए तत्व को स्थानांतरित किया जाता है और उसीमें डीओएम तत्व होता है, तो .position() अधिक उपयोगी होता है।

अगर हम तो अपने परिदृश्य के बारे में बात:

Currrently दोनों .position() और .offset() एक ही मूल है और वे दस्तावेज़ के ऑफसेट स्थिति मिल जाएगा।

अब आप तो अंतर पा सकते हैं <p>position:relative; के सीएसएस वर्ग में एक और विशेषता जोड़ सकते हैं।

संक्षेप में:

.offset().top दस्तावेज़ से शीर्ष मिल जाएगा।

.position().top रिश्तेदार माता-पिता से शीर्ष प्राप्त होगा।(मूल अपेक्षाकृत सेट है, तो)

आप अंतर यहाँ पा सकते हैं: http://jsfiddle.net/BhsrS/1/

चेकआउट बेला: http://jsfiddle.net/BhsrS/1/

Answer 2

p टैग की position प्रॉपर्टी सेट relative रहे हैं:

इस

मेरी कोड है

p { 
    color: green; 
    position: relative; 
} 

http://jsfiddle.net/zPdxB/

Answer 3

ऑफसेट माता पिता जो वास्तव में अपने उदाहरण में दस्तावेज है सापेक्ष स्थिति को jQuery: Difference between position() and offset()

स्थिति referes, क्योंकि पी एक तैनात तत्व, बल्कि इनलाइन नहीं है । यही कारण है कि आप एक ही मूल्य वापस प्राप्त कर रहे हैं।

यदि आप अपने पी तत्व को पूर्ण या रिश्तेदार स्थिति बनाते हैं, तो अवधि की स्थिति अब मूल रूप से अपेक्षित रूप से पी तत्व के सापेक्ष होगी, और इसलिए ऑफसेट से अलग मूल्य।