Positioning: Static, Relative, Absolute, Fixed, Sticky In Hindi
एचटीएमएल वेब पेज में सीएसएस का उपयोग कर विभिन्न प्रकार के बॉक्स मॉडल के पोजिशनिंग एलिमेंट को पोजीशन अप्लाई कर कण्ट्रोल किया जाता है। एचटीएमएल वेब पेज में अलग-अलग सीएसएस बॉक्स मॉडल पोजिशनिंग ऐट्रिब्यूट्स से आप बॉक्स मॉडल में वेब पेज कंटेंट एलिमेंट इनफार्मेशन को बॉक्स मॉडल में कैसे और कहा रखा जाए ये कण्ट्रोल प्रदान करते हैं, जहा वेब डेवलपर यह तय करता है कि वेब पेज एलिमेंट्स को वेब पेज में कैसे डिस्प्ले किया जाए और मौजूदा वेब पेज एलिमेंट्स को अन्य एलिमेंट के साथ कैसे मेन्युप्लेट या कण्ट्रोल किया जाए। यहाँ डिफ़ॉल्ट रूप से आपको पाँच प्रकार के बॉक्स मॉडल पोजिशनिंग मिलते है. जिसमे, स्टैटिक बॉक्स मॉडल पोजीशन, रिलेटिव बॉक्स मॉडल पोजीशन, अब्सोलुट बॉक्स मॉडल पोजीशन, फिक्स्ड बॉक्स मॉडल, और स्टिकी बॉक्स मॉडल, पोजीशन प्रमुख बॉक्स मॉडल पोजीशन है।
Static box model positioning in CSS.
एचटीएमएल वेब पेज में सीएसएस स्टैटिक बॉक्स मॉडल पोजिशनिंग वेब पेज में सभी डिजिटल कंटेंट को डिफ़ॉल्ट पोजिशनिंग में अलाइन कर डिस्प्ले करता है। यह आपके वेब पेज में वेब एलिमेंट को नार्मल डॉक्यूमेंट बॉक्स की तरह प्रीव्यू करता है। जहा डिफ़ॉल्ट रूप से वेब पेज में स्टैटिक बॉक्स मॉडल पोजीशन को टॉप, बॉटम, लेफ्ट, और राइट बॉक्स मॉडल ऐट्रिब्यूट्स पर कोइस स्पेशल इम्पैक्ट नहीं होता है।
Static box model example in an HTML web page.
.boxmodel-static {
width: 300px;
height: 140px;
background-color: teal;
}
Relative box model positioning in CSS.
एचटीएमएल वेब पेज में सीएसएस रिलेटिव बॉक्स मॉडल पोजिशनिंग वेब पेज एलिमेंट को बॉक्स मॉडल डॉक्यूमेंट में डॉक्यूमेंट रिलेटिव पोजीशन में डिस्प्ले किया जाता है।
जहा सामान्यता रिलेटिव बॉक्स मॉडल पोजीशन में टॉप, बॉटम, लेफ्ट एंड राइट बॉक्स मॉडल प्रॉपर्टीज ऑफसेट आर्डर में प्रीव्यू होंगे।
Relative box model example in an HTML web page.
.boxmodel-relative {
position: relative;
width: 400px;
height: 200px;
background-color: yellow;
top: 30px; /* it displays box model 20px down from top position */
left: 20px; /* it moves active box model 20px from left position to right direction */
}
Absolute box model positioning in CSS.
मौजूदा एचटीएमएल वेब पेज में सीएसएस अब्सोलुट बॉक्स मॉडल पोजिशनिंग वेब पेज एलिमेंट को नियरेस्ट अब्सोलुट पोजीशन स्टैटिक पोजीशन के अलावा अन्य पोजीशन मौजूदा बॉक्स मॉडल के साथ रिलेट कर डिस्प्ले किया जाता है। जहा अब्सोलुट बॉक्स मॉडल प्रॉपर मार्जिन और एलाइनमेंट के साथ अब्सोलुट पोजीशन आर्डर में प्रीव्यू किया जाता है, कई बार अब्सोलुट बॉक्स मॉडल एक्सएक्ट डायमेंशन के साथ वेब पेज एलिमेंट को प्रीव्यू करते है। अब्सोलुट बॉक्स मॉडल वेब पेज डॉक्यूमेंट डिस्प्ले अन्य एलिमेंट को डिस्टर्ब या मेन्युप्लेट नहीं करते है।
Absolute box model example in an HTML web page.
.boxmodel-absolute {
position: absolute;
width: 200px;
height: 130px;
background-color: pink;
top: 70px; /* it moves 70px box model form top position */
left: 40px; /* it moves box model content 40px from the left direction */
}
Fixed box model positioning in CSS.
मौजूदा एचटीएमएल वेब पेज में सीएसएस फिक्स्ड बॉक्स मॉडल पोजिशनिंग वेब पेज एलिमेंट व्यूपोर्ट के रिलेटिव पोजीशन में प्रीव्यू होता है. जिससे, कि यह मौजूदा वेब पेज में वेब पेज स्क्रॉल करने पर भी फिक्स्ड बॉक्स मॉडल उसी स्थान पर डिस्प्ले होता है।
जहा बॉक्स मॉडल फिक्स्ड पोजीशन में इसे नार्मल वेब पेज डॉक्यूमेंट प्रीव्यू से रिमूव कर दिया जाता है।
Fixed box model example in an HTML web page.
.boxmodel-fixed {
position: fixed;
width: 70px;
height: 70px;
background-color: green;
top: 20px; /* it moves 20px from the top of the viewport settings */
right: 20px; /* it moves 20px from the right of the viewport settings */
}
Sticky box model positioning in CSS.
मौजूदा एचटीएमएल वेब पेज में सीएसएस स्टिकी बॉक्स मॉडल पोजिशनिंग वेब पेज एलिमेंट को यूजर स्क्रॉल कंडीशन के आधार पर रिलेटिव और अब्सोलुट पोजीशन के बीच मूव नहीं करता और उसे स्टिकी पोजीशन में होल्ड रखता है। स्टिकी बॉक्स मॉडल पोजीशन वेब ब्राउज़र में यूजर स्क्रॉल बॉटम पेज कंडीशन तक पहुँचने तक रिलेटिव बॉक्स मॉडल की तरह बिहेव करता है, उसके बाद यह बॉक्स स्टिकी आर्डर में फिक्स्ड हो जाता है, जबकि वेब पेज में स्क्रॉल पोजीशन चलती रहती है ।
Sticky box model example in an HTML web page.
.boxmodel-sticky {
position: sticky;
top: 0; /* set 0 sticky position of sticky box model */
width: 100%;
height: 70px;
background-color: gray;
}
So, let’s create a box model example in an HTML web page that explains all five-box model positioning.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>CSS All Top Five Box Model Positioning Code</title>
<style>
body {
height: 1000px; /* Use to web page scrolling */
font-family: monotype corsiva;
font-weight:bold;
text-align: center;
}
.boxmodel-static {
background-color: #29b6f6;
width: 300px;
height: 140px;
}
.boxmodel-relative {
position: relative;
background-color: #ef9a9a;
width: 270px;
height: 130px;
top: 10px; /* it offset box model position form top */
}
.boxmodel-absolute {
color:white;
position: absolute;
background-color: #795548;
width: 170px;
height: 90px;
top: 70px; /* move or position the absolute box position form it nearest element */
left: 40px;
}
.boxmodel-fixed {
color:white;
position: fixed;
background-color: #33CC00;
width: 100px;
height: 100px;
top: 10px;
right: 10px;
}
.boxmodel-sticky {
color:white;
font-size:1.5em;
position: sticky;
top: 10px; /* it sticks 10px from top of the viewport settings */
width: 110%;
height: 40px;
background-color: #ff5722;
}
</style>
</head>
<body>
<div class=”boxmodel-static”>Example Of Static Box Text Positioning</div>
<br><br><br><br>
<div class=”boxmodel-relative”>Example Of Relative Box Text Positioning</div>
<br>
<div class=”boxmodel-absolute”>Example Of Absolute Box Text Positioning </div>
<br><br>
<div class=”boxmodel-fixed”>Example Of Fixed Box Text Positioning </div>
<br>
<div class=”boxmodel-sticky”>Example Of Sticky Box Model Text Positioning</div>
<br>
<div style=”margin-top: 170px; color:red; font-size:1.5em; font-family:arial”>This Is The Example Of Simple Sticky Text Without Box Model</div>
</body>
</html>
Box model positioning explanation in HTML web page.
- Static box model position – मौजूदा वेब पेज में बॉक्स मॉडल को डिफ़ॉल्ट पोजिशनिंग में प्रीव्यू किया जाता है. जहा स्टैटिक बॉक्स एलिमेंट को नार्मल आर्डर में प्रीव्यू किया जाता है।
- Relative box model position – मौजूदा वेब पेज में नार्मल पोजीशन के रिलेटिव पोजीशन ऑफसेट एलिमेंट को इम्पैक्ट करता हैं।
- Absolute box model position – मौजूदा वेब पेज में अब्सोलुट बॉक्स मॉडल एलिमेंट पोजीशन को नियरेस्ट स्थित अनसस्टर्स के रिलेटिव पोजीशन से नार्मल फ्लो से रिमूव कर दिया जाता है ।
- Fixed box model position – मौजूदा वेब पेज में वेब पेज व्यूपोर्ट के रिलेटिव पोजीशन में वेब पेज स्क्रॉल कंडीशन के दौरान अपनी पोजीशन जगह पर बना रहता है।
- Sticky box model position – मौजूदा वेब पेज में रिलेटिव और फिक्स्ड बॉक्स मॉडल पोजिशनिंग को कनेक्ट करता है, और वेब ब्राउज़र में वेब पेज यूजर स्क्रॉलिंग के दौरान एक पर्टिकुलर पॉइंट पर जा कर स्टिकी बॉक्स मॉडल स्टिक हो जाता है। और यूजर स्क्रॉल करने पर भी वेब पेज में इसपे कोइ प्रभाव नहीं पड़ता है.
