सीएसएस में एलिमेंट्स की एब्सोल्यूट पोजिशनिंग

इस पाठ में हम एलिमेंट्स की एब्सोल्यूट पोजिशनिंग को समझेंगे। यह पेज के निर्दिष्ट निर्देशांकों के अनुसार एलिमेंट्स को व्यवस्थित करने की अनुमति देता है। उदाहरण के लिए, एक एलिमेंट को पेज के शीर्ष से 100px की स्थिति में और बाईं ओर से 200px की स्थिति में रखा जा सकता है। एलिमेंट वहां चला जाएगा, इस बात की परवाह किए बिना कि वहां अन्य एलिमेंट्स होंगे और बस उनके ऊपर आ जाएगा। ऐसा कहा जाता है कि इससे एलिमेंट दस्तावेज़ के सामान्य प्रवाह से बाहर हो जाता है: अन्य सभी एलिमेंट्स ऐसे व्यवहार करेंगे मानो हमारा एलिमेंट है ही नहीं।

किसी एलिमेंट को एब्सोल्यूटली पोजिशन्ड बनाने के लिए, उस एलिमेंट को position प्रॉपर्टी को absolute वैल्यू पर सेट करना होगा। इस प्रॉपर्टी के अलावा, दो और चाहिए: एक वर्टिकल कोऑर्डिनेट सेट करेगा, और दूसरा - होरिजॉन्टल कोऑर्डिनेट।

वर्टिकल के लिए, या तो ऊपर से, या नीचे से मार्जिन सेट करना होगा। ऊपर से मार्जिन top प्रॉपर्टी सेट करता है, और नीचे से मार्जिन - bottom प्रॉपर्टी सेट करता है। होरिजॉन्टल के लिए, या तो बाईं ओर से, या दाईं ओर से मार्जिन सेट करना होगा। बाईं ओर से मार्जिन left प्रॉपर्टी सेट करता है, और दाईं ओर से मार्जिन - right प्रॉपर्टी सेट करता है।

आइए उदाहरणों पर नज़र डालें।

उदाहरण

सबसे पहले, आइए बिना किसी पोजिशनिंग के दो ब्लॉक बनाएं (ध्यान दें कि एलिमेंट्स विंडो के किनारे से चिपके हुए नहीं हैं, क्योंकि body में डिफ़ॉल्ट रूप से margin होता है):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

उदाहरण

आइए अब हरे ब्लॉक को एब्सोल्यूट पोजिशनिंग दें, इसे शीर्ष से 150px और बाईं ओर से 100px की स्थिति में रखकर:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

उदाहरण

आइए अब हरे ब्लॉक को शीर्ष से 0px और बाईं ओर से 0px की स्थिति में रखें:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

उदाहरण

आइए अब हरे ब्लॉक को शीर्ष से 0px और दाईं ओर से 0px की स्थिति में रखें:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

उदाहरण

आइए अब हरे ब्लॉक को नीचे से 0px और दाईं ओर से 0px की स्थिति में रखें:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

उदाहरण

आइए अब हरे ब्लॉक को नीचे से 0px और बाईं ओर से 0px की स्थिति में रखें:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

प्रैक्टिकल टास्क्स

एब्सोल्यूट पोजिशनिंग का उपयोग करके ब्लॉक्स को निम्नलिखित तरीके से व्यवस्थित करें: