js 设置 div 层叠

在JavaScript中设置div的层叠顺序，通常涉及到CSS的z-index属性。z-index属性决定了元素在页面上的堆叠顺序，数值越大，元素越靠前显示。

基础概念

z-index: CSS属性，用于指定元素的堆叠顺序。默认情况下，所有元素的z-index值为0，可以通过设置正整数或负整数来改变元素的堆叠顺序。

优势

控制元素的显示优先级，使得某些元素可以覆盖在其他元素之上。
在创建复杂的用户界面时，如弹出菜单、模态框等，非常有用。

类型

自动（auto）: 默认值，元素的堆叠顺序基于其在HTML中的位置。
整数: 可以是正数、负数或零，数值越大，堆叠顺序越靠前。

应用场景

创建覆盖整个页面的弹窗。
实现元素的拖放功能，拖动的元素需要在其他元素之上。
制作游戏界面，玩家的操作元素需要在背景之上。

示例代码

假设我们有两个div，我们想要让第二个div覆盖在第一个div之上：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Div Stacking Example</title>
<style>
  .div1 {
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 1;
  }
  .div2 {
    width: 200px;
    height: 200px;
    background-color: blue;
    position: absolute;
    top: 75px;
    left: 75px;
    z-index: 2;
  }
</style>
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>

</body>
</html>

在这个例子中，.div2将会显示在.div1之上，因为它的z-index值更高。

遇到的问题及解决方法

如果你发现设置了z-index但是元素的层叠顺序并没有改变，可能是以下几个原因：

position属性未设置: z-index只在定位元素（position值为relative、absolute、fixed或sticky）上有效。
父元素的层叠上下文: 如果父元素的z-index值较低，可能会影响子元素的层叠顺序。
层叠上下文: 元素的层叠顺序还受到其所在的层叠上下文的影响。

解决方法：