स्थिति पूर्ण लेकिन माता-पिता के सापेक्ष

Question

मेरे पास एक और div के अंदर दो divs हैं, और मैं एक बच्चे को पैरेंट डिव के शीर्ष दाईं ओर स्थित करना चाहता हूं, और दूसरा बच्चा css का उपयोग करके पैरेंट डिव के निचले भाग में स्थित करना चाहता हूं। यानी, मैं दो चाइल्ड डिव के साथ पूर्ण स्थिति का उपयोग करना चाहता हूं, लेकिन उन्हें पेज के बजाय पैरेंट डिव के सापेक्ष स्थिति देता हूं। मैं यह कैसे कर सकता हूँ?

नमूना html:

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>

Comments

आप चाहते हैं कि बेटा 1 पिता के ऊपरी दाएं कोने में हो, लेकिन सबसे नीचे बेटा 2 कहां होना चाहिए? नीचे बाएँ, दाएँ, या केंद्र?

— j08691

इस मामले में, आपको स्थिति निर्धारित करने की आवश्यकता होगी: मूल तत्व के सापेक्ष, और स्थिति: बच्चों के तत्वों के लिए पूर्ण। पहले बाल तत्व पर, आपको मूल तत्व के शीर्ष दाईं ओर स्थित करने के लिए शीर्ष: 0 और दाएं: 0 को रखना चाहिए। दूसरे बच्चे पर, आपको इसे मूल तत्व के तल पर स्थित करने के लिए नीचे: 0 लगाना चाहिए। यहाँ एक बढ़िया लेख है kolosek.com/css-position-relative-vs-position-absolute जो आपको रिश्तेदार और पूर्ण स्थिति के बारे में विस्तार से बता रहा है।

— नेशा ज़ोरिक

Answer 1

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

इसका कारण यह है काम करता है position: absoluteइसका मतलब है की तरह कुछ "उपयोग top, right, bottom, leftअपने आप को निकटतम पूर्वज जो के संबंध में स्थिति position: absoluteया position: relative।"

इसलिए हमारे #fatherपास position: relativeबच्चे हैं position: absolute, topऔर bottomबच्चों को पोजिशन करने के लिए इस्तेमाल करते हैं।

Comments

क्यों #father { position: relative; }आवश्यक है?

— joshreesjones

उन लोगों के लिए "स्थिति नियम" को बदलना आवश्यक है जो उसके अंदर हैं।

— BlaShadow

@ mathguy54 क्योंकि युक्ति कहती है कि पहले से मौजूद तत्वों को पहले तैनात माता-पिता के सापेक्ष रखा गया है , जिसका अर्थ है कि कोई भी अभिभावक जिसके पास कोई स्थिति मूल्य नहीं है static।

— एलेक्स डब्ल्यू

ऐसे परिदृश्य के बारे में क्या: FATHER सापेक्ष है और इसकी ऊँचाई 100% है कि बेटे और बेटे को किस स्थिति में रखा जाए, आइए क्रमशः 20% और 70% तेह पिता की ऊँचाई को कहें?

— रॉसटीन

@BruceSun w3.org/TR/CSS2/visudet.html#contain-block-details

— एलेक्स डब्ल्यू

Answer 2

div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}

Comments

यदि आपको बच्चे के साथ माता-पिता का आकार बदलने की आवश्यकता है तो क्या होगा?

— FrenkyB

Answer 3

किसी को माता-पिता के तहत सीधे एक बच्चे को तलाक देने के लिए प्रेरित करना चाहता है

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

वर्किंग डेमो कोडपेन

Answer 4

यदि आप माता-पिता को कोई पद नहीं देते हैं, तो डिफ़ॉल्ट रूप से यह लेता है static। यदि आप यह समझना चाहते हैं कि अंतर इस उदाहरण से है

उदाहरण 1::

http://jsfiddle.net/Cr9KB/1/

   #mainall
{

    background-color:red;
    height:150px;
    overflow:scroll
}

यहाँ मूल वर्ग की कोई स्थिति नहीं है इसलिए तत्व को शरीर के अनुसार रखा गया है।

उदाहरण 2 ::

http://jsfiddle.net/Cr9KB/2/

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

इस उदाहरण में माता-पिता की सापेक्ष स्थिति होती है इसलिए तत्व को सापेक्ष माता-पिता के अंदर निरपेक्ष रखा जाता है।

Comments

और, अगर आपके पास #mainall {ऊंचाई: 150px} नहीं है ... तो क्या होगा? मेरा मतलब है, अगर मेनॉल की गतिशील ऊंचाई है?

— अल्बर्ट कैटला

तब आपका फ़्लोटिंग तत्व उस स्थिति के सापेक्ष होगा जो मूल तत्व तब था जब पृष्ठ (और सीएसएस) लोड किया गया था। यदि आप अपडेट करना चाहते हैं कि पेज लोड होने के बाद, जावास्क्रिप्ट का उपयोग करें - clientX और clientY शुरू करने के लिए एक अच्छी जगह है

— अब्राहम ब्रूक्स