HTML DOM Style zIndex गुणधर्म

HTML DOM style zIndex गुणधर्म HTML दस्तावेज़ में स्थित तत्व के स्टैकिंग क्रम को लौटाता और संशोधित करता है।

वाक्य रचना (Syntax)

निम्नलिखित वाक्य रचना है:

zIndex लौटाना

object.style.zIndex

zIndex संशोधित करना

object.style.zIndex = "value"

मान (Values)

यहाँ मान निम्न हो सकते हैं:

मान	व्याख्या
initial	यह इस गुणधर्म के मान को उसके डिफ़ॉल्ट मान पर सेट करता है।
inherit	यह अपने पैरेंट तत्व से इस गुणधर्म का मान विरासत में लेता है।
auto	इसमें तत्व HTML दस्तावेज़ में उनके क्रम के आधार पर स्टैक होते हैं।
number	यह एक पूर्णांक दर्शाता है जो किसी तत्व के स्टैक क्रम को निर्दिष्ट करता है।

उदाहरण

आइए HTML DOM style zIndex गुणधर्म का एक उदाहरण देखें:

<!DOCTYPE html> <html> <head> <style> 
    body { 
        color: #000; 
        height: 100vh; 
    } 
    .box1 { 
        width: 100px; 
        height: 100px; 
        background: lightcoral; 
        position: relative; 
        top: 50px; 
    } 
    .box2 { 
        width: 100px; 
        height: 100px; 
        background: lightgreen; 
        position: relative; 
    } 
    .btn { 
        background: #db133a; 
        border: none; 
        height: 2rem; 
        border-radius: 2px; 
        width: 40%; 
        display: block; 
        color: #fff; 
        outline: none; 
        cursor: pointer; 
        margin: 1rem 0; 
    } 
</style> </head> <body> 
<h1>DOM Style zIndex गुणधर्म उदाहरण</h1> 
<div class='box1'></div> 
<div class='box2'></div> 
<button onclick="add()" class="btn">zIndex बदलें</button> 
<script> 
    function add() { 
        document.querySelector('.box1').style.zIndex = "1"; 
    } 
</script> </body> </html>

आउटपुट

यह निम्न आउटपुट उत्पन्न करेगा:

HTML DOM Style zIndex गुणधर्म

"zIndex बदलें" बटन पर क्लिक करके लाल और हरे बॉक्स का क्रम बदलें:

HTML DOM Style zIndex गुणधर्म