设置div的z-index属性让div在另外一个div之上

在网页设计中，我们经常需要设置 div 元素的 z-index 属性，以控制其在另一个 div 元素之上的显示顺序。下面是一个完整攻略，包含了如何使用 CSS 设置 div 元素的 z-index 属性的过程和两个示例说明。

CSS 如何设置 div 元素的 z-index 属性

我们可以使用 CSS 的 z-index 属性来设置 div 元素的层叠顺序。z-index 属性控制元素在 z 轴方向上的显示顺序，即元素的层叠顺序。z-index 属性的值越大，元素就越靠近屏幕前面，越容易被用户看到。下面是一个示例：

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.container {
  position: relative;
}

.box1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #ddd;
  z-index: 1;
}

.box2 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  z-index: 2;
}

上述代码中，我们使用 z-index 属性来设置 div 元素的层叠顺序。我们将 .container 元素的 position 属性设置为 relative，以使其成为 .box1 和 .box2 元素的相对定位容器。我们将 .box1 元素的 position 属性设置为 absolute，以使其脱离文档流。我们将 .box1 元素的 top 和 left 属性设置为 0，以使其位于 .container 元素的左上角。我们将 .box1 元素的宽度和高度设置为 200px，并将其背景颜色设置为 #ddd。我们将 .box1 元素的 z-index 属性设置为 1，以使其在 .box2 元素之下。我们将 .box2 元素的 position 属性设置为 absolute，以使其脱离文档流。我们将 .box2 元素的 top 和 left 属性设置为 50px，以使其位于 .container 元素的左上角偏移 50px 的位置。我们将 .box2 元素的宽度和高度设置为 200px，并将其背景颜色设置为 #ccc。我们将 .box2 元素的 z-index 属性设置为 2，以使其在 .box1 元素之上。

示例说明

下面是两个示例，演示如何使用 CSS 设置 div 元素的 z-index 属性。

示例一：使用 z-index 属性

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.container {
  position: relative;
}

.box1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #ddd;
  z-index: 1;
}

.box2 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  z-index: 2;
}

上述代码中，我们使用 z-index 属性来设置 div 元素的层叠顺序。我们将 .container 元素的 position 属性设置为 relative，以使其成为 .box1 和 .box2 元素的相对定位容器。我们将 .box1 元素的 position 属性设置为 absolute，以使其脱离文档流。我们将 .box1 元素的 top 和 left 属性设置为 0，以使其位于 .container 元素的左上角。我们将 .box1 元素的宽度和高度设置为 200px，并将其背景颜色设置为 #ddd。我们将 .box1 元素的 z-index 属性设置为 1，以使其在 .box2 元素之下。我们将 .box2 元素的 position 属性设置为 absolute，以使其脱离文档流。我们将 .box2 元素的 top 和 left 属性设置为 50px，以使其位于 .container 元素的左上角偏移 50px 的位置。我们将 .box2 元素的宽度和高度设置为 200px，并将其背景颜色设置为 #ccc。我们将 .box2 元素的 z-index 属性设置为 2，以使其在 .box1 元素之上。

示例二：使用 z-index 属性

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.container {
  position: relative;
}

.box1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #ddd;
  z-index: 2;
}

.box2 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  z-index: 1;
}

上述代码中，我们使用 z-index 属性来设置 div 元素的层叠顺序。我们将 .container 元素的 position 属性设置为 relative，以使其成为 .box1 和 .box2 元素的相对定位容器。我们将 .box1 元素的 position 属性设置为 absolute，以使其脱离文档流。我们将 .box1 元素的 top 和 left 属性设置为 0，以使其位于 .container 元素的左上角。我们将 .box1 元素的宽度和高度设置为 200px，并将其背景颜色设置为 #ddd。我们将 .box1 元素的 z-index 属性设置为 2，以使其在 .box2 元素之上。我们将 .box2 元素的 position 属性设置为 absolute，以使其脱离文档流。我们将 .box2 元素的 top 和 left 属性设置为 50px，以使其位于 .container 元素的左上角偏移 50px 的位置。我们将 .box2 元素的宽度和高度设置为 200px，并将其背景颜色设置为 #ccc。我们将 .box2 元素的 z-index 属性设置为 1，以使其在 .box1 元素之下。