HTML - DOM樣式物件zIndex屬性

HTML DOM樣式物件**zIndex**屬性用於設定定位元素的z軸順序。堆疊順序較高的元素會覆蓋堆疊順序較低的元素。

語法

設定zIndex屬性

object.style.zIndex= "auto | number | initial | inherit";

獲取zIndex屬性

object.style.zIndex;

屬性值

值	描述
auto	這是預設值，允許瀏覽器指定元素的堆疊順序。
數字	指定元素的堆疊順序。也接受負值。
initial	用於將此屬性設定為其預設值。
inherit	用於繼承其父元素的屬性。

返回值

它返回一個字串值，表示元素的堆疊順序。

HTML DOM樣式物件'zIndex'屬性示例

在下面的示例中，我們更改了最初設定為-1的影像的堆疊順序，然後將其設定為1以覆蓋書面內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object zIndex Property
    </title>
    <style>
        #image {
            position: absolute;
            z-index: -1;
        }
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>
        Click to change stack order
    </p>
    <button onclick="fun()">Change Order</button>    
    <br><br>
    <img src="/plsql/images/plsql-mini-logo.jpg" id="image">
    <p>
        This text will be covered by Logo as image has 
    </p>
    <p>
        higher stack order which is 1.
    </p>
    <script>
        function fun() {
            document.getElementById("image")
                .style.zIndex = "1";
        }
    </script>
</body>
</html>

支援的瀏覽器

屬性
zIndex	是 1	是 12	是 1	是 1	是 4

html_dom_style_object_reference.htm

列印頁面