CSS元素堆叠方法详解

2023年3月20日下午11:15 • Web开发基础

CSS 元素堆叠可以在网页设计中实现复杂效果，包括图层重叠、图片透明度、叠加效果等等。下面为您提供一个完整攻略来了解 CSS 元素堆叠的实现。

CSS 元素堆叠原理

CSS 中的元素堆叠顺序遵循一个规则：后面的元素会始终显示在前面的元素上方（覆盖前面的元素）。但是，有些元素不遵循这一规则：

position 属性

当元素被设置为position:absolute或position:fixed时，它们脱离了文档流，并在页面上绝对定位，相对于其最近的非static（默认值）定位的祖先元素。

这些元素首先在堆叠顺序中出现，无论它们在 HTML 中的位置如何。在这些元素中，z-index 属性的值大的元素会在 z-index 小的元素上方。

z-index 属性

z-index 属性用于设置元素在堆叠顺序中的显示顺序。具有较高 z-index 值的元素位于堆叠顺序的顶部。

文档流

在没有设置position或z-index属性的情况下，文档流中的元素将按照它们在 HTML 中出现的顺序叠加，后面的元素叠在前面的元素之上。

示例

下面通过一个例子来演示如何使用元素堆叠属性。

HTML 代码：

<div class="stack">
  <img src="image1.jpg" alt="image1" class="img1">
  <img src="image2.jpg" alt="image2" class="img2">
  <p class="text">Some text here</p>
</div>

CSS 代码：

.stack {
  position: relative;
}

.img1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0.6;
}

.img2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.text {
  position: relative;
  z-index: 3;
}

这个例子中有两个图片和一个文本，我们给第一个图片加上了不透明度 opacity: 0.6 ，并将其堆叠顺序设为 z-index: 1；第二个图片堆叠顺序为 z-index: 2，而文本的堆叠顺序为 z-index: 3。

运行这段代码后，第一个图片将被第二个图片和文本覆盖。如果我们将第一个图片的位置设为 z-index: 2，那么两个图片之间的顺序将反转。