पूर्ण स्थिति के अंदर पूर्ण स्थिति

Question

मेरे पास 3 divतत्व हैं।

1 divबड़ा (रैप) और हैposition:relative;

2 divको पहली divसापेक्ष स्थिति के लिए निरपेक्ष रखा गया है (और 1 में शामिल किया गया है div)

3 वें divमें निहित है divऔर इसमें पूर्ण स्थिति भी है।

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

3rd divपोजीशन 2nd से पूर्ण क्यों है div(जो कि 1st की भी पोजिशन है div) और न divकि 1st की जो रिलेटिव पोजिशन है?

क्योंकि तीसरा divनिरपेक्ष स्थान पर दूसरा स्थान है div।

Comments

यह वास्तव में कुछ है जो मैं देख रहा हूँ और आपके सवालों के जवाब ने मेरी आँखें खोल दीं: \।

— बेंजामिन

निरपेक्ष: तत्व अपने पहले तैनात (स्थिर नहीं) पूर्वज तत्व के सापेक्ष स्थित होता है

— ओसवाल्डो जैपाटा

Answer 1

क्योंकि position: absoluteबच्चों के लिए सापेक्ष स्थिति को वैसा ही position: relativeबनाता है जैसा कि है।

इसके आस-पास कोई रास्ता नहीं है - यदि आप चाहते हैं कि तीसरे divको पहले वाले के लिए अपेक्षाकृत तैनात किया जाए, तो आपको इसे पहले वाले बच्चे को बनाना होगा।

Comments

तो मूल रूप से पूर्ण स्थिति यह पूर्ण स्थिति वाले बच्चे के लिए सापेक्ष स्थिति बन जाती है?

— पुफोस

@ पफोस की तरह। 0px / 0pxबच्चों के लिए स्थिति से रीसेट हो जाता हैposition: absolute

— पेका

@ मुझे लगता है कि आप इसे थोड़ा भ्रमित कर रहे हैं। position:relativeइसका मतलब है कि तत्व अपनी वर्तमान स्थिति से अपेक्षाकृत ऊपर (ऊपर, दाएं, नीचे बाएं) का उपयोग करके तैनात किया जाएगा। position: absoluteसाधन यह ब्राउज़र विंडो या के साथ पहली बार माता-पिता के अनुसार किस स्थिति हो जाएगा position: absoluteया position: relative।

— seler

क्या आप इसके लिए ऑनलाइन कोई संदर्भ साझा कर सकते हैं? मैं किसी भी एक बहुत नहीं पा सके क्योंकि ... और ... धन्यवाद

— pufos

@pufos बहुत ही मूल संदर्भ यहाँ है: w3.org/TR/CSS2/visuren.html#choose-position

— Pekka

Answer 2

दोनों position:relativeऔर position:absoluteस्थिति पूर्वजों के रूप में युक्त तत्व स्थापित करते हैं।

यदि आपको div 1 पर आधारित होने के लिए div 3 की आवश्यकता है तो इसे div 1 का सीधा बच्चा बनाएं।

ध्यान दें कि position: relativeतत्व अपनी प्राकृतिक स्थिति के सापेक्ष स्थित है और position: absoluteइसका अर्थ है कि तत्व अपने पहले position:relativeया position:absoluteपूर्वज के सापेक्ष स्थित है ।

Comments

मैं चाहता था कि 3rd div निरपेक्ष पद पर पूर्ण रूप से तैनात रहे, लेकिन मुझे नहीं पता कि क्या यह मानक (क्रॉसब्रोसर) है .. और मुझे ऑनलाइन विनिर्देश नहीं मिले ... बहुत बहुत धन्यवाद

— pufos

उस अनुभाग में पूर्ण स्थिति: w3.org/TR/CSS21/visuren.html#comp-abspos

— माइक

@MikeTunnicliffe निरपेक्ष का अर्थ है तत्व अपनी पहली स्थिति के सापेक्ष स्थित है: यह भी निर्धारित किया गया है

— Trần Kim D15

Answer 3

स्थिर स्थिति: स्थिर स्थिति वह डिफ़ॉल्ट तरीका है जो कोई तत्व आपकी HTML फ़ाइल के सामान्य प्रवाह में दिखाई देगा यदि कोई स्थिति बिल्कुल भी निर्दिष्ट नहीं है।

महत्वपूर्ण: top, right, bottomऔर leftगुण नहीं प्रभाव पर एक स्थिर तैनात तत्व।

पोजिशन रिलेटिव: रिलेटिव वैल्यू के साथ एक पोजिशनिंग पोजिशन आपके HTML फाइल के नॉर्मल फ्लो में एलिमेंट (और जिस जगह पर कब्जा होता है) को रखता है।

इसके बाद आप गुणों का उपयोग करके कुछ राशि से तत्व स्थानांतरित कर सकते हैं left, right, topऔर bottom। हालाँकि, यह पृष्ठ पर मौजूद अन्य तत्वों को ओवरलैप करने के लिए तत्व का कारण बन सकता है - जो आप चाहते हैं कि हो सकता है या नहीं।

एक अपेक्षाकृत तैनात तत्व अपने स्थान से स्थानांतरित हो सकता है, लेकिन जिस स्थान पर कब्जा किया गया है वह बना रहता है।

स्थिति निरपेक्ष: किसी तत्व को पूर्ण स्थिति मान लागू करने से यह सामान्य प्रवाह से हट जाता है। जब आप निरपेक्ष तैनात तत्व को स्थानांतरित करते हैं, तो इसका संदर्भ बिंदु अपने निकटतम तत्व का शीर्ष / बाईं ओर होता है, जिसमें स्थैतिक के अलावा किसी अन्य स्थान की घोषणा की जाती है - जिसे इसका निकटतम स्थिति संदर्भ भी कहा जाता है। इसलिए, यदि स्थैतिक के अलावा किसी अन्य स्थिति वाला कोई तत्व मौजूद नहीं है, तो यह शरीर तत्व के ऊपरी-बाएँ कोने से स्थित होगा।

आपके मामले में 3rd का निकटतम कंटेनर 2 है।

Answer 4

फिर भी एक और स्पष्ट जवाब।

आपका वर्तमान परिदृश्य यह है:

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

और आप इसके साथ संघर्ष कर रहे हैं।

यदि आप HTML को बदल सकते हैं, तो बस यह करें:

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */

Comments

मेरे-रैपर शायद

— .my-

यह दृष्टिकोण अद्भुत है, मुझे अभी भी पता नहीं है कि इसने मेरी समस्या को क्यों हल किया। मेरी समस्या यह है कि मैं किसी अन्य कारण से पहले तत्व का बच्चा होने के लिए अपना तीसरा तत्व नहीं रख सकता।

— हवामामो

Answer 5

कारण 3 जी divतत्व 2 divतत्व के लिए बिल्कुल तैनात है, क्योंकि जैसा कि सीएसएस कल्पना यहां बताती है , ऐसा इसलिए है क्योंकि एक बिल्कुल तैनात तत्व का "मूल" तत्व (बेहतर कहा गया है: ब्लॉक युक्त) जरूरी नहीं कि इसका तत्काल मूल तत्व है, लेकिन बल्कि इसके तत्काल तैनात तत्व यानी कोई भी तत्व जिसकी स्थिति किसी भी चीज़ के staticलिए सेट है लेकिन उदाहरण के लिएposition: relative/absolute/fixed/sticky;

इसलिए, जब भी आपके कोड में संभव हो, यदि आप चाहते हैं कि तीसरा divतत्व 1 के संबंध में पूरी तरह से तैनात हो , तो आपको divअपना दूसरा divतत्व बनाना चाहिए, position: static;जो इसका डिफ़ॉल्ट मान है (या बस position: ...अपने 2 divतत्व के नियम सेट में किसी भी घोषणा को हटा दें ) ।

ऊपर 1 कर देगा धारक ब्लॉक 3 की पूरी तरह से तैनात , 2 अनदेखी इस स्थिति प्रयोजन के लिए।divdivdiv

आशा करता हूँ की ये काम करेगा।

Answer 6

मामले में किसी को अभी भी इस के लिए एक जवाब की तलाश है।

मैं clear: both;पहली पूरी तरह से तैनात div में एक शैली जोड़कर इस परिणाम को प्राप्त करने में सक्षम था जो बच्चे को रीसेट करता है और इसे अपनी absoluteस्थिति का उपयोग करने की अनुमति देता है ।