css制作叠层

使用 CSS 实现叠层效果

叠层效果（Layering）通常指通过 CSS 的定位、堆叠顺序（z-index）和透明度等属性，实现多个元素的视觉层级叠加。以下是几种常见方法：

使用 position 和 z-index 控制层级

通过 position: absolute 或 position: relative 结合 z-index 实现叠层。z-index 值越大，元素越靠上。

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

.layer1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.5);
  z-index: 1;
}

.layer2 {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 255, 0.5);
  z-index: 2;
}

使用 mix-blend-mode 实现混合叠层

通过混合模式（如 multiply、screen）让叠层元素与背景产生色彩交互。

.overlay {
  background-color: #ff0000;
  mix-blend-mode: multiply;
}

使用 ::before 和 ::after 伪元素

通过伪元素在不修改 HTML 结构的情况下添加叠层。

.box {
  position: relative;
  width: 200px;
  height: 200px;
  background: #eee;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

使用 CSS Grid 或 Flexbox 控制叠层

通过 Grid 或 Flexbox 的层级特性实现叠层，无需绝对定位。

.container {
  display: grid;
}

.layer1, .layer2 {
  grid-area: 1 / 1;
}

.layer2 {
  align-self: center;
  justify-self: center;
}

关键注意事项

• z-index 仅在定位元素（position 非 static）中生效。
• 叠层顺序受父容器 z-index 影响（层叠上下文）。
• 使用 opacity 或 rgba 调整透明度时，注意子元素会继承透明度。

通过组合这些方法，可以实现复杂的视觉叠层效果。