सीएसएस में पोजिशनिंग के लिए नकारात्मक मान
हमारे द्वारा अध्ययन किए गए गुण top, right,
bottom और left न केवल सकारात्मक, बल्कि नकारात्मक
मान भी ले सकते हैं। आइए उदाहरणों से देखें।
उदाहरण
निम्नलिखित उदाहरण में, तत्व अपने माता-पिता के सापेक्ष पूर्ण रूप से स्थित होता है
और शीर्ष पर 0, बाईं ओर 0 की स्थिति में होता है:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
उदाहरण
और अब आइए तत्व को शीर्ष पर -20px, बाईं ओर -30px की स्थिति में ले जाएं:
<div id="parent">
<div id="child"></div>
</div>
#parent {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
border: 1px solid red;
}
#child {
position: absolute;
top: -20px;
left: -30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
:
निम्नलिखित नमूने में, हरा ब्लॉक margin का उपयोग करके
स्क्रीन के केंद्र में स्थित है, और लाल ब्लॉक इसके सापेक्ष स्थित होते हैं।
दिए गए नमूने के अनुसार पृष्ठ को दोहराएं:
