HTML DOM स्टाइल position प्रॉपर्टी HTML दस्तावेज़ में एक HTML एलिमेंट द्वारा उपयोग की जाने वाली पोजिशनिंग विधि को लौटाती और संशोधित करती है।
सिंटैक्स
1. position प्राप्त करना:
object.position
2. position संशोधित करना:
object.position = "value"
position मान
| क्र.सं. | मान और व्याख्या |
|---|---|
| 1 | initial इस प्रॉपर्टी को इसके डिफ़ॉल्ट मान पर सेट करता है (static)। |
| 2 | inherit पैरेंट एलिमेंट से इस प्रॉपर्टी का मान विरासत में लेता है। |
| 3 | static डिफ़ॉल्ट। एलिमेंट डॉक्यूमेंट फ्लो में क्रम में रेंडर होता है। top/right/bottom/left/z-index का कोई प्रभाव नहीं। |
| 4 | absolute एलिमेंट डॉक्यूमेंट में अपने पहले पोजिशन्ड पूर्वज एलिमेंट के सापेक्ष पोजिशन होता है। डॉक्यूमेंट फ्लो से हट जाता है। |
| 5 | fixed एलिमेंट डॉक्यूमेंट में ब्राउज़र विंडो के सापेक्ष पोजिशन होता है। स्क्रॉल करने पर भी जगह पर रहता है। डॉक्यूमेंट फ्लो से हट जाता है। |
| 6 | relative एलिमेंट डॉक्यूमेंट में अपनी सामान्य स्थिति के सापेक्ष पोजिशन होता है। top/right/bottom/left ऑफसेट काम करते हैं। डॉक्यूमेंट फ्लो में जगह बरकरार रहती है। |
| 7 | sticky एलिमेंट डॉक्यूमेंट में उपयोगकर्ता की स्क्रॉल पोजीशन के अनुसार पोजिशन होता है। relative और fixed का हाइब्रिड। |
उदाहरण: पोजीशन fixed पर सेट करना
<!DOCTYPE html>
<html>
<style>
body { color: #000; height: 100vh; }
.btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem 0; }
.square { width: 100px; height: 100px; background: #db133a6b; top: 150px; left: 50%; }
.show { font-size: 1.2rem; margin: 1rem 0; }
</style>
<body>
<h1>DOM स्टाइल position प्रॉपर्टी डेमो</h1>
<div class='square'></div>
<button onclick="set()" class="btn">पोजीशन सेट करें</button>
<script>
function set() {
document.querySelector('.square').style.position = "fixed";
}
</script>
</body>
</html>
आउटपुट
- प्रारंभ में: गुलाबी वर्ग static position में (top/left नजरअंदाज)
- "पोजीशन सेट करें" क्लिक: position="fixed" हो जाता है, वर्ग व्यूपोर्ट के सापेक्ष top:150px, left:50% पर स्थिर हो जाता है
पोजिशनिंग प्रकारों की तुलना
| प्रकार | फ्लो में | संदर्भ | ऑफसेट काम करते हैं | स्क्रॉल व्यवहार |
|---|---|---|---|---|
| static | हाँ | - | नहीं | सामग्री के साथ स्क्रॉल |
| relative | हाँ (जगह रखता है) | स्वयं की सामान्य स्थिति | हाँ | सामग्री के साथ स्क्रॉल |
| absolute | नहीं | निकटतम पोजिशन्ड पूर्वज | हाँ | पूर्वज के साथ स्क्रॉल |
| fixed | नहीं | व्यूपोर्ट | हाँ | विंडो में स्थिर |
| sticky | हाँ (थ्रेशोल्ड तक) | निकटतम स्क्रॉल पूर्वज | हाँ | थ्रेशोल्ड तक स्क्रॉल, फिर स्थिर |
z-index नोट
z-index केवल गैर-static पोजिशन्ड एलिमेंट्स पर काम करता है। स्टैकिंग कॉन्टेक्स्ट बनाता है।
