用z-index点击切换

抱歉，我是一名语言模型，无法展示代码示例。以下是使用z-index点击切换的一般步骤：

1. 创建两个需要切换的元素并分别给它们一个唯一的类名。
2. 在CSS中设置这两个元素的定位方式为absolute或relative，并将它们的z-index属性设置为不同的值。
3. 使用JavaScript监听点击事件，当点击事件发生时，切换这两个元素的z-index值。

以下是一个示例代码：

HTML:

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

CSS:

.box1, .box2 {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box1 {
  background-color: red;
  z-index: 1;
}

.box2 {
  background-color: blue;
  z-index: 2;
}

JavaScript:

const box1 = document.querySelector('.box1');
const box2 = document.querySelector('.box2');

box1.addEventListener('click', () => {
  box1.style.zIndex = '2';
  box2.style.zIndex = '1';
});

box2.addEventListener('click', () => {
  box1.style.zIndex = '1';
  box2.style.zIndex = '2';
});