आसानी से jQuery में किसी अन्य तत्व पर एक तत्व को स्थानांतरित करें?

Question

मुझे jQuery के साथ एक छवि पर div को स्थानांतरित करने की आवश्यकता है। मैं इसे position: fixed का उपयोग करके बना सकता हूं और तत्व ऑफसेट का उपयोग करके इसे स्थिति में रखने के लिए ऊपर और बाएं उपयोग कर सकता हूं, लेकिन यह बेकार है क्योंकि यदि उपयोगकर्ता स्क्रॉल करता है तो तत्व तत्व के शीर्ष पर नहीं होगा।

कोई अन्य विचार?

Answer 1

आप इस से अधिक स्थानों कर रहे हैं, तो आप ऐसा कर सकते हैं:

<div style="position: relative;"> 
    <div style="position:absolute; width: 276px; height: 110px; z-index: 2;"> 
    Content here will be on top the image 
    </div> 
    <img style="width: 276px; height: 110px;" src='http://www.google.com/intl/en_ALL/images/logo.gif' alt="Test Img" /> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

यदि आप height/width शैली आंतरिक/ouer divs पर विशेषताओं से मेल खाते हैं, भीतरी <div> आता <img /> से पहले और आप आंतरिक <div> छवि की तुलना में एक उच्च जेड-इंडेक्स देते हैं, यह पूरी तरह से छवि को ओवरलैप कर देगा।

आप यहां कार्रवाई में इसका एक उदाहरण देख सकते हैं: http://jsfiddle.net/ZcBus/

Answer 2

स्थिति के साथ एक कंटेनर div बनाएँ: रिश्तेदार। फिर अपनी छवि को div के अंदर रखें, और अपने मूल div को स्थिति के रूप में भी रखें: पूर्ण, लेकिन कंटेनर div के सापेक्ष समन्वय में। उदाहरण के लिए

<div style='position:relative'> 
    <img src='' alt=''/> 
    <div id='original' style='position:absolute; top:10px; left:50px'/> 
</div> 

आप कुछ या सभी मार्कअप इंजेक्ट करने के लिए jQuery का उपयोग कर सकते हैं, या शैली बदल सकते हैं लेकिन आपको बिल्कुल स्क्रिप्ट का उपयोग नहीं करना है।