बल "स्थिति: निरपेक्ष" दस्तावेज़ के सापेक्ष होना चाहिए और माता-पिता कंटेनर नहीं

93

मैं शरीर के किसी भी हिस्से में एक div डालने की कोशिश कर रहा हूं और position: absoluteपूरे दस्तावेज के सापेक्ष बनाऊंगा न कि एक पैरेंट एलिमेंट जिसमें ए position: relative।

html css css-position

— टिमोथी रुहेल
स्रोत

यदि यह स्थिति दस्तावेज़ के सापेक्ष पूर्ण है, तो यह <body>टैग के बच्चे के रूप में है , नहीं?

— जिम गैरिसन

क्या आपने नीचे मेरा समाधान देखा?

— ट्विट 16

हाँ। मैं एक टेम्पलेट बना रहा हूं जो बहुत सारे पृष्ठों में उपयोग किया जाता है और कभी-कभी इसके एक सापेक्ष रूप से तैनात तत्व के अंदर होता है (जो मैं नियंत्रित नहीं कर सकता। मैं अब देख रहा हूं कि यह असंभव है। आपकी सहायता के लिए धन्यवाद। मेरे से +1 और मैं इसे चिह्नित करूंगा। सही है यदि आप कहते हैं कि यह आपके उत्तर में असंभव है।

— टिमोथी रुहेल

ब्रेनजेर का सीएसएस में पोजिशनिंग के लिए पूरी तरह से क्लासिक परिचय है जो यहां किसी भी प्रकार के सवालों को स्पष्ट करेगा।

— एलन एच।

36

आपको तत्व के divबाहर position:relativeऔर में रखना होगा body।

— tw16
स्रोत

1

^ ^ यह। यदि यह पूरी तरह से तैनात है, तो वास्तव में इसे अपेक्षाकृत तैनात तत्व के अंदर रखने का कोई कारण नहीं है।

— डूमैनियाक जूल

7

@DOManiac - आप इसे अपेक्षाकृत स्थित तत्व के अंदर चाह सकते हैं क्योंकि आप चाहते हैं कि यह एक माउसओवर स्क्रिप्ट को चलाए, या माता-पिता द्वारा ट्रिगर की गई माउसआउट स्क्रिप्ट को न चलाए। मेरा जवाब ऐसी स्थिति के लिए अनुमति देता है।

— माइकल। लूले

1

@DOMANiac एक निरपेक्ष तत्व को एक सापेक्ष तत्व में डालने का कारण है, सापेक्ष तत्व के सापेक्ष पूर्ण div स्थिति। यदि आप शरीर के सापेक्ष स्थिति बनाना चाहते हैं, तो डिफ़ॉल्ट रूप से शरीर सापेक्ष है, भले ही वह इस तरह से सेट न हो।

— जेसन फोगलिया

18

ऐसे सैकड़ों कारण हो सकते हैं जिनके लिए आपके पास कंटेनर होना चाहिए दूसरे कंटेनर का बच्चा होने के लिए लेकिन स्थिति दस्तावेज़ के लिए निरपेक्ष होनी चाहिए। उत्तर की तरह इसे सीधे शरीर में शामिल करना गलत है। सही उत्तर स्थिति है: निश्चित। Downvoted।

— walv

3

@ ग्वाल: position:fixedऔर position:absoluteएक ही व्यवहार नहीं है। फिक्स्ड व्यूपोर्ट (दस्तावेज नहीं) के सापेक्ष है और आइटम को हमेशा स्क्रॉल करने के बाद भी दिखाई देगा संभावित रूप से ओवरलैप होने के कारण आदि। मैं समझता हूं कि HTML संरचना के वैध कारण हो सकते हैं, लेकिन जैसा कि प्रश्न विशेष रूप से html और सीएसएस, मेरा जवाब सही है। जेएस के बिना दस्तावेज़ के सापेक्ष बनाने का एकमात्र तरीका इसे position:relativeतत्व से बाहर निकालना है ।

— Tw16

95

तुम खोज रहे हो position: fixed।

MDN से :

निश्चित स्थिति पूर्ण स्थिति के समान है, इस अपवाद के साथ कि तत्व युक्त ब्लॉक व्यूपोर्ट है। इसका उपयोग अक्सर एक अस्थायी तत्व बनाने के लिए किया जाता है जो पेज स्क्रॉल करने के बाद भी उसी स्थिति में रहता है।

— एड्रियन होलोवेटी
स्रोत

28

इस उत्तर के साथ समस्या यह है कि उपयोगकर्ता निरपेक्ष का उपयोग करना चाहता था क्योंकि निश्चित तत्व स्क्रॉल पर नहीं चलते हैं और निरपेक्ष तत्व करते हैं :)

— एक दोस्त

3

तुम एक परम किंवदंती हो।

— बेनिसबर्गर्स

6

प्रश्न यह था कि दस्तावेज़ के सापेक्ष स्थिति कैसे

— पॉल हम्फ्रीज़

यह संभावित रूप से समस्याएँ पैदा कर सकता है क्योंकि स्टैकिंग संदर्भों के साथ बग की वजह से

— जेम्स वेस्टगेट

32

मेरा समाधान अपने माता-पिता के बाहर div को हिलाने के लिए jQuery का उपयोग करना था:

<script>
    jQuery(document).ready(function(){
        jQuery('#loadingouter').appendTo("body");
    });
</script>

<div id="loadingouter"></div>

— liorq
स्रोत

1

इससे मेरी समस्या हल हो गई क्योंकि मैं अपने तत्व को सीधे शरीर के तत्व के अंदर नहीं रख सका क्योंकि मैं मास्टर पृष्ठों का उपयोग कर रहा था। धन्यवाद!

— ओस्प्रे

9

यदि आप तत्व को संलग्न नहीं करना चाहते हैं body, तो निम्न समाधान काम करेगा।

मुझे इस सवाल की तलाश थी जो एक ऐसे समाधान की तलाश में था जो शरीर को div को संलग्न किए बिना काम करेगा, क्योंकि मेरे पास एक माउसओवर स्क्रिप्ट थी जिसे मैं तब चलाना चाहता था जब माउस नए तत्व और इसे फैलाने वाले तत्व दोनों से अधिक था। जब तक आप jQuery का उपयोग करने के लिए तैयार हैं, और @Liam विलियम के जवाब से प्रेरित हैं:

var leftOffset = <<VALUE>>;
var topOffset = <<VALUE>>;
$(element).css("left", leftOffset - element.offset().left);
$(element).css("top", topOffset - element.offset().top);

यह समाधान तत्व की वर्तमान बाईं और शीर्ष स्थिति (शरीर के सापेक्ष) को घटाकर काम करता है ताकि तत्व को 0 पर ले जाया जा सके, 0. तत्व को उस स्थान पर रखना जहाँ आप शरीर के सापेक्ष चाहते हैं तब बाएँ और शीर्ष को जोड़ने के रूप में सरल है मूल्य।

— Michael.Lumley
स्रोत

2

इसके अलावा उल्लेख के लायक jQueryUI स्थिति समारोह है।

— माइकल। लूले

8

यह केवल सीएसएस और HTML के साथ संभव नहीं है।

जावास्क्रिप्ट / jQuery का उपयोग करके आप संभावित रूप jQuery.offset()से DOM को तत्व प्राप्त कर सकते हैं और इसकी jQuery.position()गणना कर सकते हैं कि यह पृष्ठ पर कहां दिखाई देनी चाहिए।

— चूना
स्रोत

IMHO यह उत्तर सबसे सहायक है - तत्व को सीधे शरीर के नीचे स्थानांतरित किए बिना (जो हमेशा संभव नहीं है) और बिना स्थिति का उपयोग किए जो कि तत्व को हमेशा दिखाई देगा जब नीचे स्क्रॉल करते हुए भी हम केवल JS का सहारा ले सकते हैं। jQuery.offset({ left: 0 })जीत के लिए!

— बॉर्नटूकोड