CSS में बिना निर्देशांक के पूर्ण पोजिशनिंग
वास्तव में पूर्ण पोजिशनिंग में निर्देशांक निर्दिष्ट करना आवश्यक नहीं है। यदि तत्व को
बस position को absolute मान में लिखा जाए,
तो यह पूर्ण रूप से पोजिशन हो जाएगा,
लेकिन उसी स्थान पर खड़ा रहेगा जहां
था। इस स्थिति में अन्य सभी तत्व ऐसे व्यवहार करेंगे
जैसे कि हमारा तत्व नहीं है
और उस पर चढ़ सकते हैं।
आइए उदाहरणों पर नजर डालें।
उदाहरण
शुरुआत के लिए आइए बिना पोजिशनिंग के तीन ब्लॉक बनाएं और उनके बीच में कुछ पाठ:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
उदाहरण
और अब हरे ब्लॉक को absolute जोड़ते हैं।
परिणामस्वरूप यह ब्लॉक अपने स्थान पर रहेगा,
और नीचे के सभी तत्व ऐसे व्यवहार करेंगे,
जैसे कि हमारा तत्व नहीं है और उस पर चढ़ जाएंगे:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
उदाहरण
और अब आइए left गुण जोड़ें,
लंबवत स्थिति को जोड़े बिना। परिणामस्वरूप
क्षैतिज रूप से हमारा ब्लॉक निर्दिष्ट
मान पर हो जाएगा, और लंबवत रूप से - वहीं खड़ा रहेगा
जहां था:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* क्षैतिज स्थिति जोड़ते हैं */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
उदाहरण
अब आइए, इसके विपरीत, top गुण जोड़ें,
क्षैतिज स्थिति को जोड़े बिना।
परिणामस्वरूप लंबवत रूप से हमारा ब्लॉक
निर्दिष्ट मान पर हो जाएगा, और क्षैतिज रूप से -
वहीं खड़ा रहेगा जहां था:
<div id="elem1"></div>
<div id="elem2"></div>
text text text text text text
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* लंबवत स्थिति जोड़ते हैं */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
