HTML 不使用绝对定位的情况下实现Z-Index效果

在本文中，我们将介绍如何在不使用绝对定位的情况下实现HTML中的Z-Index效果。Z-Index属性用于控制元素在堆叠（层叠）顺序中的位置，具有较高的Z-Index值的元素将覆盖具有较低Z-Index值的元素。

阅读更多：HTML 教程

使用浮动实现Z-Index效果

浮动（float）是一种常用的布局技术，可以让元素在文档中的位置浮动起来。我们可以利用浮动来控制元素的层叠顺序。

首先，我们需要创建需要进行层叠的元素。例如，我们创建两个带有不同背景颜色的div元素:

<div class="box blue">Blue Box</div>
<div class="box red">Red Box</div>

接下来，我们给这两个div元素添加一些基本的CSS样式，使其具有一定的大小和定位：

.box {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

然后，我们可以使用浮动属性来控制这两个元素的层叠顺序。给第一个div元素添加浮动属性，浮动方向设为left（左浮动），给第二个div元素设置一个较高的z-index值，使其覆盖在第一个元素之上：

.blue {
  background-color: blue;
  float: left;
}

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

通过这样的设置，浮动的元素将被提升到堆叠顺序的最前面，而具有较高z-index值的元素将覆盖在浮动元素之上，实现了Z-Index效果。

使用相对定位实现Z-Index效果

相对定位（relative position）是另一种常用的布局技术，它会相对于元素在文档中的原始位置进行定位。我们可以利用相对定位来控制元素的层叠顺序。

与浮动方法类似，我们首先创建需要进行层叠的元素：

<div class="box blue">Blue Box</div>
<div class="box red">Red Box</div>

然后给这两个div元素添加相对定位属性，并设置一个较高的z-index值来控制层叠顺序：

.box {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
  position: relative;
}

.blue {
  background-color: blue;
  z-index: 1;
}

.red {
  background-color: red;
}

通过这样的设置，具有较高z-index值的元素将覆盖在具有较低z-index值的元素之上，实现了Z-Index效果。

使用Flexbox实现Z-Index效果

Flexbox是一种强大的布局模型，可以方便地控制元素在容器中的位置和大小，并且可以轻松实现Z-Index效果。

首先，我们创建一个带有多个子元素的容器，并给子元素添加一些基本样式：

<div class="box flex-container">
  <div class="box-item blue">Blue Box</div>
  <div class="box-item red">Red Box</div>
</div>

接下来，给容器添加Flexbox布局属性，并为需要进行层叠的子元素设置一个较高的order值来控制层叠顺序：

.flex-container {
  display: flex;
  flex-direction: column;
}

.box-item {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
  order: 1;
}