JQuery में मैं माता-पिता के सापेक्ष किसी तत्व के "शीर्ष, बाएं" गुणों को कैसे सेट कर सकता हूं और दस्तावेज़ नहीं?

Question

.offset([coordinates])विधि एक तत्व के निर्देशांक को निर्धारित करती है लेकिन केवल दस्तावेज के सापेक्ष। फिर मैं एक तत्व के निर्देशांक को कैसे सेट कर सकता हूं लेकिन माता-पिता के सापेक्ष?

मैंने पाया कि .position()विधि को माता-पिता के सापेक्ष केवल "शीर्ष, बाएं" मान मिलता है, लेकिन यह कोई मूल्य निर्धारित नहीं करता है।

मैंने कोशिश की

$("#mydiv").css({top: 200, left: 200});

लेकिन काम नहीं करता है।

Answer 1

माता-पिता के सापेक्ष स्थिति निर्धारित करने के लिए आपको position:relativeमाता-पिता और position:absoluteतत्व को निर्धारित करना होगा

$("#mydiv").parent().css({position: 'relative'});
$("#mydiv").css({top: 200, left: 200, position:'absolute'});

यह काम करता है क्योंकि position: absolute;अपेक्षाकृत निकटतम तैनात माता-पिता (यानी, डिफ़ॉल्ट के अलावा किसी भी स्थिति की संपत्ति के साथ निकटतम माता-पिता static) के पदों पर अपेक्षाकृत अधिक है ।

Comments

$("#mydiv").css({top: '200px', left: '200px', position:'absolute'});<- अच्छा $("#mydiv").css({top: '200', left: '200', position:'absolute'});<- बुरा। जाहिरा तौर पर, यदि स्थिति मान तार हैं , तो आपको इकाइयों को शामिल करना होगा, या इसका कोई प्रभाव नहीं होगा।

— बॉब स्टीन

ध्यान दें कि एक रिश्तेदार पद पर आसीन माता-पिता ने मुझे बहुत हताशा से बचाया। धन्यवाद।

— न्यूक्लियरपॉन

Answer 2

$("#mydiv").css('top', 200);

$("#mydiv").css('left', 200);

Comments

कुछ और निर्देश यहाँ मदद करेंगे

— कबूतर

या $ ("# mydiv")। css ({'टॉप': 200, 'लेफ्ट': 200});

— निक बी

दूसरे शब्दों में, ओपी सही होता अगर वे "टॉप" और "लेफ्ट" उद्धृत करते?

— रुफुसवीस

Answer 3

आप jQuery UI की .position विधि आज़मा सकते हैं ।

$("#mydiv").position({
  of: $('#mydiv').parent(),
  my: 'left+200 top+200',
  at: 'left top'
});

कार्यशील डेमो देखें।

Comments

.position ()

— बजे

जहां यह वास्तव में कहता है कि यह स्थिति निर्धारित कर सकता है? मुझे लगता है कि यह केवल मूल्यों को पा सकते हैं, उन्हें बदल नहीं सकते।

— क्रिस

.position () विधि मान सेट नहीं करता है!

— मैक्स 12

बहुत ही रोचक!!! जब आप मूल तत्व की सीएसएस स्थिति संपत्ति (जैसा कि मुख्य उत्तर में उल्लेख किया गया है) को सेट करने में सक्षम नहीं होने के कारण आपका कोड बहुत उपयोगी है क्योंकि यह एक यूआई विजेट है और आप एक चिकनी गतिविधि के लिए इसकी सेटिंग्स बदलना नहीं चाहते हैं। बेशक यह केवल तब होता है जब आप jQuery UI का उपयोग कर रहे हों। मुझे यह छोटा सा मुद्दा jQuery UI "ड्रैगेबल" विजेट के साथ मिला।

— अधिकतम

Answer 4

मैंने पाया कि यदि पास किया गया मान एक स्ट्रिंग प्रकार है, तो इसे 'px' (यानी 90px) द्वारा पालन किया जाना चाहिए, जहाँ यदि मान एक पूर्णांक है, तो यह स्वतः ही px को जोड़ देगा। चौड़ाई और ऊंचाई के गुण अधिक क्षमाशील (या तो प्रकार के कार्य) हैं।

var x = "90";
var y = "120"
$(selector).css( { left: x, top: y } )        //doesn't work
$(selector).css( { left: x + "px", top: y + "px" } )        //does work

x = 90;
y = 120;
$(selector).css( { left: x, top: y } )        //does work

Answer 5

कोड गतिशील पृष्ठ के लिए गतिशील ऑफसेट

var pos=$('#send').offset().top;
$('#loading').offset({ top : pos-220});

Answer 6

स्थिति को स्थापित करने पर अपनी याददाश्त को ताज़ा करते हुए, मैं इतनी देर से आ रहा हूं कि मुझे नहीं पता कि कोई और इसे देखेगा, लेकिन -

मुझे स्थिति का उपयोग करना पसंद नहीं है css(), हालांकि अक्सर यह ठीक है। मुझे लगता है कि सबसे अच्छी शर्त है कि jQuery UI के position()सेटर का उपयोग xdazz द्वारा किया गया है। हालाँकि अगर jQuery UI किसी कारण से है, तो कोई विकल्प नहीं है (अभी तक jQuery है), मुझे यह पसंद है:

const leftOffset = 200;
const topOffset = 200;
let $div = $("#mydiv");
let baseOffset = $div.offsetParent().offset();
$div.offset({
  left: baseOffset.left + leftOffset,
  top: baseOffset.top + topOffset
});

यह मनमाने ढंग से $divमाता-पिता को सापेक्ष स्थिति में स्थापित करने का लाभ नहीं है (क्या होगा यदि $divमाता-पिता स्वयं, किसी और चीज़ के अंदर पूर्ण नहीं है?)। मुझे लगता है कि एकमात्र प्रमुख किनारे का मामला है अगर $divकोई नहीं है offsetParent, तो यकीन नहीं है कि यह वापस आ जाएगा document,null या पूरी तरह से कुछ और।

offsetParent 2008 में jQuery 1.2.6 के बाद से उपलब्ध है, इसलिए यह तकनीक अब काम करती है और जब मूल प्रश्न पूछा गया था।

Answer 7

के offset()फ़ंक्शन का उपयोग करें jQuery। यहाँ यह होगा:

$container.offset({
        'left': 100,
        'top': mouse.y - ( event_state.mouse_y - event_state.container_top ) 
    });