如何在JavaScript中設定定位元素的堆疊順序？

在本教程中，我們將學習如何設定JavaScript中定位元素的堆疊順序。要設定堆疊順序，我們可以使用樣式zIndex屬性。

讓我們首先檢查一下堆疊順序是什麼。堆疊順序表示DOM元素顯示的順序。這是元素在z軸上的位置。

那麼，什麼是定位元素？一個定位元素具有相對、絕對、固定或靜態位置。

為什麼我們需要堆疊順序？定位的元素可能會重疊並顯得雜亂無章；因此，我們使用堆疊順序來更好地排列它們。我們可以在橫幅、對話方塊、工具提示等上使用堆疊順序。

讓我們更深入地瞭解這個概念，並理解如何實現它。

使用樣式zIndex屬性

在JavaScript中，使用樣式zIndex屬性，我們可以設定或返回定位元素的堆疊順序。具有最高堆疊順序的元素顯示在具有最低堆疊順序的其他元素的前面。

如果重疊元素具有相同的zIndex，則HTML順序將生效。在這種情況下，最後一個元素顯示在頂部。

索引值範圍限制在 -2147483648 到 +2147483647。

負zIndex值在複雜的UI元素中非常方便。我們可以使用負值將元素定位在其父元素的後面。

諸如“before”和“after”之類的偽選擇器使用負zIndex值。第四代瀏覽器可能不支援負zIndex。

一些瀏覽器在iframe標籤的情況下不遵循z-index。內聯框架將浮動在其他元素上，而不考慮zIndex。視窗化元素（如下拉選單）也是如此。

第四代瀏覽器將顯示所有表單控制元件元素位於其他定位元素的頂部，而不管堆疊順序如何。

使用者可以按照以下語法使用此屬性。

語法

以下是使用JavaScript中的樣式zIndex屬性設定定位元素堆疊順序的語法：

object.style.zIndex = value;

此語法允許我們將所需的zIndex設定為元素的樣式。下面解釋了可用的值。

引數

  • auto − 瀏覽器根據元素在文件中的順序設定元素的堆疊順序。

  • number − 設定元素堆疊順序的整數。接受負值。

  • initial − 將此屬性設定為其預設值。

  • inherit − 從其父元素繼承此屬性。

物件的預設值為auto。返回值是一個表示定位元素堆疊順序的字串。

示例1

您可以嘗試執行以下程式碼以在JavaScript中實現zIndex屬性：

<!DOCTYPE html>
<html>
<head>
   <style>
      #myID {
         position: absolute;
         left: 20px;
         top: 20px;
         z-index: -1
      }
   </style>
</head>
<body>
   <h3> Setting the stack order of positioned elements using the<i> zIndex </i>property.
   </h3>
   <img id = "myID" src="https://tutorialspoint.tw/videotutorials/images/tutor_connect_home.jpg" width = "500" height = "400">
   <button type="button" onclick="myFunction()">Set Stack Order</button>
   <p>Z-index is -1</p>
   <script>
      function myFunction() {
         document.getElementById("myID").style.zIndex = "1";
      }
   </script>
</body>
</html>

示例2

此程式允許使用者反轉多個div元素的堆疊順序。

顏色框的初始順序為綠-黃-紅-藍。當用戶按下按鈕時，我們呼叫函式根據上面的語法設定zIndex。

我們透過分別設定zIndex為2,1,0,-1來將順序更改為藍-紅-黃-綠。因此，藍色塊首先出現，其餘塊位於其下方。

<html>
<head>
   <style>
      .zIndxEl{
         position: absolute;
         width: 100px;
         height: 50px;
      }
      #zIndxEl1{
         background-color: blue;
         top: 40px;
         left: 40px;
      }
      #zIndxEl2{
         background-color: red;
         top: 30 px;
         left: 30 px;
      }
      #zIndxEl3{
         background-color: yellow;
         top: 20px;
         left: 20px;
      }
      #zIndxEl4{
         background-color: green;
         top: 10px;
         left: 10px;
      }
      #zIndxWrap{
         position: relative;
      }
      #zIndxBtnWrap{
         margin-top: 70px;
         float: left;
      }
   </style>
</head>
<body>
   <h3> Setting the stack order of positioned elements using <i> the zIndex property. </i></h3>
   <div id = "zIndxWrap">
      <div class = "zIndxEl" id = "zIndxEl1"></div>
      <div class = "zIndxEl" id = "zIndxEl2"></div>
      <div class = "zIndxEl" id = "zIndxEl3"></div>
      <div class = "zIndxEl" id = "zIndxEl4"></div>
   </div>
   <br>
   <div id = "zIndxBtnWrap">
      <p> Click on the button to reverse the color blocks with zIndex. </p>
      <button onclick = "setZIndex();"> Reverse </button>
   </div>
   <br>
</body>
   <script>
      function setZIndex(){
         var zIndxBtnWrap = document.getElementById("zIndxBtnWrap");
         zIndxBtnWrap.style.display = "none";
         var zIndxEl1 = document.getElementById("zIndxEl1");
         var zIndxEl2 = document.getElementById("zIndxEl2");
         var zIndxEl3 = document.getElementById("zIndxEl3");
         var zIndxEl4 = document.getElementById("zIndxEl4");
         zIndxEl1.style.zIndex = "2";
         zIndxEl2.style.zIndex = "1";
         zIndxEl3.style.zIndex = "0";
         zIndxEl4.style.zIndex = "-1";
      }
   </script>
</html>

在本教程中，我們學習了JavaScript中的zIndex屬性。要設定定位元素的堆疊順序，此屬性是JavaScript中的內建選項。

儘管其實現有點複雜，但在許多網站上它仍然很有用。

更新於：2022年10月12日

331 次瀏覽

開啟您的職業生涯

完成課程，獲得認證

開始學習
廣告
© . All rights reserved.