position प्रॉपर्टी

position प्रॉपर्टी एलिमेंट्स की पोजीशनिंग का तरीका निर्धारित करती है। यह प्रॉपर्टी अक्सर top, right, bottom, left, प्रॉपर्टीज के साथ संयोजन में उपयोग की जाती है, जो क्रमशः ऊपर, दाएं, नीचे, बाएं से दूरी सेट करती हैं।

सिंटैक्स

सिलेक्टर {
	position: absolute | relative | fixed | static | sticky;
}

position के लिए वैल्यूज

वैल्यू	विवरण
`absolute`	एब्सोल्यूट पोजीशनिंग। एलिमेंट को डॉक्यूमेंट के नॉर्मल फ्लो से हटा दिया जाता है और पोजीशन किया जाता है नजदीकी पोजीशन किए गए एंसिस्टर (अगर है) के सापेक्ष या ब्राउज़र विंडो के सापेक्ष।
`relative`	रिलेटिव पोजीशनिंग। एलिमेंट को डॉक्यूमेंट फ्लो में अपनी सामान्य स्थिति के सापेक्ष स्थानांतरित किया जाता है, लेकिन वह स्थान जो उसने घेरा था, वह आरक्षित रहता है।
`fixed`	फिक्स्ड पोजीशनिंग। एलिमेंट को डॉक्यूमेंट के नॉर्मल फ्लो से हटा दिया जाता है और पोजीशन किया जाता है ब्राउज़र विंडो के सापेक्ष। पेज स्क्रॉल करने पर भी अपनी जगह पर रहता है।
`static`	स्टैटिक पोजीशनिंग। इस वैल्यू का मतलब है कोई पोजीशनिंग नहीं और एलिमेंट सामान्य रूप से व्यवहार करता है।
`sticky`	स्टिकी पोजीशनिंग। एलिमेंट `relative` की तरह व्यवहार करता है, जब तक कि स्क्रॉल करते समय निर्दिष्ट पोजीशन तक नहीं पहुंच जाता, उसके बाद वह उस जगह पर चिपक जाता है (`fixed` की तरह)।

डिफॉल्ट वैल्यू: static।

उदाहरण . एब्सोल्यूट पोजीशनिंग

एलिमेंट को स्क्रीन के ऊपरी बाएं कोने में थोड़े मार्जिन के साथ रखें:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

उदाहरण . एब्सोल्यूट पोजीशनिंग

अब एलिमेंट को स्क्रीन के ऊपरी दाएं कोने में थोड़े मार्जिन के साथ रखें:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

उदाहरण . फिक्स्ड पोजीशनिंग

फिक्स्ड पोजीशनिंग में एलिमेंट स्क्रॉल करते समय भी अपनी जगह पर रहेगा:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

उदाहरण . रिलेटिव पोजीशनिंग

रिलेटिव पोजीशनिंग में एलिमेंट अपनी सामान्य स्थिति के सापेक्ष स्थानांतरित हो जाता है, लेकिन अन्य एलिमेंट्स ऐसे व्यवहार करते हैं, जैसे कि एलिमेंट स्थानांतरित नहीं हुआ था:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

उदाहरण . नेस्टिंग

अगर पैरेंट की position प्रॉपर्टी की वैल्यू relative है, तो एब्सोल्यूटली पोजीशन किए गए एलिमेंट्स पैरेंट के सापेक्ष पोजीशन किए जाएंगे:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

उदाहरण . नेस्टिंग

अगर पैरेंट की position प्रॉपर्टी की वैल्यू absolute है, तो एब्सोल्यूटली पोजीशन किए गए एलिमेंट्स पैरेंट के सापेक्ष पोजीशन किए जाएंगे:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

उदाहरण . स्टिकी पोजीशनिंग

अगर किसी एलिमेंट की position प्रॉपर्टी की वैल्यू sticky है, तो एलिमेंट relative की तरह व्यवहार करता है, जब तक कि स्क्रॉल करते समय निर्दिष्ट पोजीशन तक नहीं पहुंच जाता, उसके बाद वह उस जगह पर चिपक जाता है। आइए एक स्टिकी हेडर बनाते हैं:

<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

उदाहरण . बिना पोजीशन के

अगर किसी एलिमेंट को पोजीशन निर्दिष्ट किए बिना एब्सोल्यूट पोजीशनिंग दी जाए, तो एलिमेंट उसी जगह रहेगा, जहां वह बिना पोजीशनिंग के था, लेकिन अन्य एलिमेंट्स उसे नोटिस करना बंद कर देंगे:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

उदाहरण . एक अक्ष

एब्सोल्यूट पोजीशनिंग में पोजीशन केवल एक अक्ष पर निर्दिष्ट की जा सकती है। उदाहरण के लिए, अगर हम top प्रॉपर्टी सेट करते हैं, तो वर्टिकल रूप से एलिमेंट सही पोजीशन में आ जाएगा, लेकिन होरिजॉन्टल रूप से वहीं रहेगा, जहां पहले था:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

उदाहरण . सभी पोजीशन

एब्सोल्यूट पोजीशनिंग में चौड़ाई और ऊंचाई सेट किए बिना सभी तरफ से पोजीशन सेट की जा सकती है। इस स्थिति में एलिमेंट पैरेंट ब्लॉक के केंद्र में आ जाएगा:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

यह भी देखें

z-index प्रॉपर्टी,
जो एलिमेंट्स के ओवरलैपिंग को निर्धारित करती है