Z-Index with two columns（使用两列的Z-Index）

以下是一个使用两列的Z-Index的示例代码：

HTML代码：

<div class="container">
  <div class="column1">
    <h2>Column 1</h2>
    <p>This is the content of column 1.</p>
  </div>
  <div class="column2">
    <h2>Column 2</h2>
    <p>This is the content of column 2.</p>
  </div>
</div>

CSS代码：

.container {
  position: relative;
  display: flex;
}

.column1, .column2 {
  width: 50%;
  position: relative;
  z-index: 1;
}

.column1 {
  background-color: lightblue;
}

.column2 {
  background-color: lightgreen;
}

.column1 h2, .column2 h2 {
  position: relative;
  z-index: 2;
}

.column1 p, .column2 p {
  position: relative;
  z-index: 3;
}

在上面的代码中，我们使用了position: relative;和z-index属性来控制两列的层叠顺序。.container类设置position: relative;，以便我们在其中的子元素上使用z-index。.column1和.column2两列都设置了position: relative;和z-index: 1;，这将使它们在同一层级上。然后，我们分别为两列的标题和内容的h2和p元素设置了不同的z-index值，以改变它们的层叠顺序。

通过使用不同的z-index值，我们可以控制两列中不同元素的显示顺序，并实现所需的效果。