如何修复z-index堆叠问题：背景图遮挡card::after伪元素

API 探路者

2026-6-13

解决背景图覆盖card伪元素的层级问题

问题根源

你遇到的问题是堆叠上下文导致z-index失效：当给.card设置z-index:2时，它会创建一个独立的堆叠上下文，此时.card::after的z-index:-1只能在这个上下文内部生效（也就是在.card元素下方），但整个.card的堆叠层级比.background-img（z-index:0）高，所以背景图加载后会把伪元素盖住。

调整方案

直接按以下层级逻辑修改样式，就能实现「背景图 → card::after → card」的层级顺序：

保持.background-img的z-index:0，作为最底层
给.card设置position:relative（用于伪元素定位），不要设置z-index，避免创建独立堆叠上下文
给.card::after设置position:absolute（或fixed，根据布局需求）和z-index:-1，此时伪元素会相对于父容器的堆叠上下文生效，自然落在.card下方、背景图上方

示例代码

/* 背景图样式 */
.background-img {
  position: fixed; /* 或 absolute，根据你的布局调整 */
  z-index: 0;
  width: 100%;
  height: 100%;
  background: url('你的背景图路径') center/cover no-repeat;
}

/* 卡片样式 */
.card {
  position: relative; /* 仅用于伪元素定位，不设置z-index */
  width: 300px;
  height: 200px;
  padding: 20px;
  background: #fff;
  /* 其他卡片样式 */
}

/* 卡片伪元素样式 */
.card::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: -8px;
  bottom: -8px;
  background: #eee; /* 伪元素的背景/阴影效果 */
  z-index: -1;
}