HTML DOM स्टाइल पोजीशन प्रॉपर्टी एक HTML दस्तावेज़ में HTML तत्व द्वारा उपयोग की जाने वाली पोजिशनिंग विधि को लौटाती है और संशोधित करती है।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
1. वापसी की स्थिति
object.position
2. स्थिति को संशोधित करना
object.position = “value”
यहाँ, मान हो सकता है -
<टेबल> <थेड> क्रमांक <थ> मान और स्पष्टीकरण 1 प्रारंभिकयह इस गुण मान को उसके डिफ़ॉल्ट मान पर सेट करता है। 2 उत्तराधिकारी
यह इस संपत्ति मूल्य को अपने मूल तत्व से प्राप्त करता है। 3 स्थिर
इसमें, तत्व दस्तावेज़ प्रवाह में दिखाई देने के क्रम में प्रस्तुत होंगे। 4 पूर्ण
इसमें, तत्व दस्तावेज़ में अपने पहले स्थित पूर्वज तत्व के सापेक्ष स्थित होगा। 5 तय
इसमें, तत्व दस्तावेज़ में ब्राउज़र विंडो के सापेक्ष स्थित होगा। 6 रिश्तेदार
इसमें, तत्व दस्तावेज़ में अपनी सामान्य स्थिति के सापेक्ष स्थित होगा। 7 चिपचिपा
इसमें, तत्व दस्तावेज़ में उपयोगकर्ता की स्क्रॉल स्थिति के अनुसार स्थित होगा
आइए HTML DOM स्टाइल पोजीशन प्रॉपर्टी का एक उदाहरण देखें -
उदाहरण
<!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 Style position Property Demo</h1>
<div class='square'></div>
<button onclick="set()" class="btn">Set Position</button>
<script>
function set() {
document.querySelector('.square').style.position = "fixed";
}
</script>
</body>
</html> आउटपुट
“स्थिति सेट करें . पर क्लिक करें गुलाबी . की स्थिति सेट करने के लिए बटन वर्ग।
