web作业实现图层层叠切换

Web作业中实现图层（通常指CSS中的`<div>`元素或类似容器）的层叠切换，通常是指通过CSS（层叠样式表）的`z-index`属性控制页面上各个元素的堆叠顺序。`z-index`是一个整数值，用来指定元素相对于其兄弟元素或包含它的定位元素的垂直位置。当两个或更多的元素拥有相同的`position`值（如`relative`, `absolute`, 或 `fixed`），并且它们的部分区域相互重叠时，`z-index`就起到决定哪个元素显示在上方的作用。

以下是基本步骤：

1. **设置定位**：首先，需要为想要层叠的元素设置`position`属性为非`static`（例如`relative`, `absolute`, 或 `fixed`）。

2. **给每个图层分配`z-index`**：给每一个图层元素设定一个唯一的`z-index`值，数值越大，元素就越靠近屏幕前端。

3. **触发切换**：可以使用JavaScript事件或者用户交互（比如点击按钮、鼠标悬停等）来改变某个图层的`z-index`，使其显示或隐藏在其他元素之上。

<div class="layer layer1" id="layer1">第一层</div>
<div class="layer layer2" id="layer2">第二层</div>

<button onclick="toggleLayer('layer1')">切换第一层</button>
<button onclick="toggleLayer('layer2')">切换第二层</button>

<script>
function toggleLayer(layerId) {
  const layer = document.getElementById(layerId);
  layer.style.zIndex = layer.style.zIndex === 'auto' ? 1 : -1; // 将当前层级置为自动或相反
}
</script>

在这个例子中，点击按钮会切换对应图层的`z-index`值，使得原本在底层的图层浮到最上面，而另一层则下沉至底层。