如何在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.com/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 次浏览

开启您的职业生涯

完成课程，获得认证

开始学习
广告