CSS में पूर्ण पैरेंट के सापेक्ष पोजिशनिंग
पिछले पाठ में हमने समझा कि,
यदि पैरेंट को relative दिया जाए, तो
उसके चाइल्ड एलिमेंट्स उसके सापेक्ष
पूर्ण रूप से पोजिशन होंगे। ऐसा अक्सर किया जाता है,
जब नहीं चाहते कि पैरेंट एलिमेंट
नॉर्मल फ्लो से बाहर हो जाए।
ऐसा भी हो सकता है कि पैरेंट को
absolute दिया गया हो। इस स्थिति में absolute वाले चाइल्ड एलिमेंट्स
ऐसे पैरेंट के सापेक्ष पोजिशन होंगे, न कि ब्राउज़र विंडो के सापेक्ष:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: absolute;
top: 100px;
left: 200px;
width: 500px;
height: 300px;
border: 1px solid red;
}
#child {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
border: 1px solid green;
}
:
400px आकार का एक वर्गाकार ब्लॉक बनाएं जिसकी पोजिशनिंग
एब्सोल्यूट हो।
उसके अंदर 50px आकार के दो और ब्लॉक बनाएं।
पहले ब्लॉक को पैरेंट के ऊपरी दाएं कोने में रखें, और दूसरे ब्लॉक को निचले
बाएं कोने में रखें।
