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

Question

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

नमूना HTML:

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

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 है करने के लिए स्थिति का उपयोग जैसा ही कुछ है क्योंकि । "

तो हम #fatherposition: relative है बनाने के लिए, और बच्चों position: absolute है, तो top और bottom का उपयोग बच्चों स्थिति।

Answer 2

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

Answer 3

यदि आप माता-पिता को कोई स्थिति नहीं देते हैं तो डिफ़ॉल्ट रूप से 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 
} 

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

Answer 4

बैठाना किसी स्थिति चाहता है एक बच्चे div सीधे एक माता पिता

#father { 
    position: relative; 
} 

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

कार्य डेमो Codepen