css 层叠与z-index的示例代码

我们来详细讲解一下 CSS 层叠与 z-index 的示例代码。首先，需要了解一些基本概念：

我们来详细讲解一下 CSS 层叠与 z-index 的示例代码。首先，需要了解一些基本概念：

• CSS 层叠（Cascade），是指同时存在多个 CSS 规则时，根据一定的优先级来决定应用哪条规则的流程。
• z-index 属性用于控制堆叠顺序，数值越大的元素越在上面。

接下来，我们来看两个示例：

示例1

HTML 代码：

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>

CSS 代码：

.box {
  width: 100px;
  height: 100px;
  position: absolute;
}

#box1 {
  background-color: red;
  left: 20px;
  top: 20px;
  z-index: 1;
}

#box2 {
  background-color: blue;
  left: 50px;
  top: 50px;
  z-index: 2;
}

代码中，我们定义了两个 div 元素，宽高分别为 100px，定位方式为绝对定位。其中 #box1 的背景色为红色，定位于距离左上角 20px 处，并且 z-index 属性值为 1；#box2 的背景色为蓝色，定位于距离左上角 50px 处，并且 z-index 属性值为 2。

因为 #box2 的 z-index 值大于 #box1 的 z-index 值，所以 #box2 会处于 #box1 上方。也就是说，页面上会先显示蓝色的方块，再显示红色的方块。

示例2

HTML 代码：

<div class="parent">
  <div class="child" id="child1"></div>
  <div class="child" id="child2"></div>
</div>

CSS 代码：

.parent {
  position: relative;
  width: 200px;
  height: 200px;
}

.child {
  width: 100px;
  height: 100px;
}

#child1 {
  background-color: red;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
}

#child2 {
  background-color: blue;
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1;
}

代码中，我们定义了一个父元素 parent，宽高均为 200px，定位方式为相对定位。其中包含两个子元素 child1 和 child2，定位方式为绝对定位，宽高均为 100px，分别背景色为红色和蓝色，分别位于距离左上角 20px 和 50px 处，并且z-index 属性值分别为 2 和 1。

因为 #child1 的 z-index 值大于 #child2 的 z-index 值，并且 #child1 在 #child2 的上方，所以 #child1 会覆盖 #child2。也就是说，页面上会先显示红色的方块，再显示蓝色的方块。

以上就是关于 CSS 层叠与 z-index 的示例代码的详细攻略。希望能够帮到您。