如何在模糊body元素上方显示div？添加z-index无效问题排查

嘿，我之前也踩过这个坑！这问题的核心原因是：当你给body添加filter: blur()这类滤镜时，body会自动创建一个新的堆叠上下文，这就导致你给div设置的z-index只能在这个堆叠上下文内部生效，根本没法“跳”到body的上方。

两种可行的解决方案： #

方案1：用伪元素承载模糊背景（适合给body背景加模糊的场景）

如果你的模糊效果是针对body背景的，别直接给body加滤镜，把背景放到body的伪元素里，让伪元素作为底层，这样div就能正常显示在上面了：

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  /* 这里不要加filter */
}

/* 用伪元素放模糊背景 */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('你的背景图路径') center/cover no-repeat;
  filter: blur(8px);
  z-index: -1; /* 把伪元素压在body内容下方 */
}

/* 你的目标div */
.target-div {
  position: relative; /* z-index需要配合定位生效 */
  z-index: 1;
  padding: 2rem;
  background: rgba(255,255,255,0.9);
  margin: 2rem;
}

方案2：给body内的内容容器加模糊（适合body内容需要模糊的场景）

如果是body里的其他内容需要模糊，那把这些内容放到一个单独的容器里，给这个容器加滤镜，然后让你的目标div和这个容器同级（都作为body的子元素），这样div的z-index就能轻松压过模糊容器：

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
}

/* 存放需要模糊的内容 */
.blur-content {
  position: relative;
  z-index: 0;
  filter: blur(8px);
  padding: 2rem;
}

/* 要显示在上方的div */
.target-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  padding: 2rem;
  background: white;
}

关键知识点提醒： #

• z-index只有在元素设置了position: relative/absolute/fixed/sticky时才会生效
• 当元素添加了filter、transform、opacity等属性时，会自动创建新的堆叠上下文，子元素的z-index会被限制在这个上下文内，无法突破父级的堆叠层级

内容的提问来源于stack exchange，提问作者Hiurako