CSS如何防止不同z-index层级元素在指定深度范围内重叠

安全阿岳

2026-9-3

问题说明

常规开发中我们通常通过position搭配z-index实现元素逐层堆叠，用来组合独立元素形成单个组件的视觉效果。本次需要实现的效果是：让高层级元素阻挡后方指定深度范围内元素的重叠显示，具体落地场景为动态饼图组件开发：

饼图包含中心区域在内的所有元素都是独立节点，页面同时存在背景水波纹动画、顶部雾效、背景图片等多层动态效果，所有元素已经设置了不同的层级深度
要求饼图中心区域保持透明背景，同时不受后方元素效果干扰；核心待解决问题是：悬停饼图子项（.pie-children）时，子项的背景色等效果会覆盖中心区域
饼图中心和所有子项默认都是透明背景，中心区域z-index高于子项，但子项触发hover状态时的背景仍然会和中心区域重叠
之前尝试过给饼图子项设置透明背景渐变规避重叠，但该方案仅适配4分片的固定结构饼图，动态生成分片数量变化时，背景渐变角度会适配失效
额外要求：除了背景色，每个子项的box-shadow效果也需要避开饼图中心区域，但背景图上层的水波纹等动态效果需要正常运行，不能被阻断

效果示意图

当前饼图子项hover状态的CSS代码如下：

.pie-children:hover {
    /* box-shadow: 0px 0px 30px 10px rgba(255, 255, 255, 0.2) inset, 0px 0px 30px 10px rgba(255, 255, 255, 0.2); */
    background-color: rgba(255, 255, 255, .15);
    backdrop-filter: blur(5px);
    text-shadow: 0px 0px 5px rgba(255, 255, 0.8);
    /* background-image: radial-gradient(farthest-corner at 0% 100%, transparent 0 25%, rgba(255, 255, 255, .15) 25% 100%); */
    cursor: pointer;
}

实现方案

不需要调整现有z-index堆叠逻辑，用CSS mask遮罩属性就能完美实现需求，适配任意分片数量的动态饼图：

核心逻辑：给所有.pie-children元素统一加环形遮罩，直接挖掉中心圆形区域，子项的所有视觉效果（背景色、内外阴影、滤镜、边框）只会在环形扇区范围内渲染，根本不会侵入中心区域，完全不需要根据分片数量调整渐变角度。
具体代码如下，把变量值替换成你项目里的实际尺寸即可：

.pie-children {
  /* 饼图整体直径 */
  --pie-diameter: 400px;
  /* 中心空心区域直径 */
  --center-hole-diameter: 200px;
  /* webkit内核浏览器兼容 */
  -webkit-mask: radial-gradient(circle at center, transparent 0 calc(var(--center-hole-diameter) / 2), #000 calc(var(--center-hole-diameter) / 2));
          mask: radial-gradient(circle at center, transparent 0 calc(var(--center-hole-diameter) / 2), #000 calc(var(--center-hole-diameter) / 2));
}

注意：mask属性裁剪的是元素本身的所有视觉表现，不会影响下层元素，遮罩挖空的区域是完全透明的，下方的水波纹、雾效、背景动画会正常显示，完全符合需求。

如果需要兼容不支持mask的旧版本浏览器，可以用clip-path实现完全一致的效果：

.pie-children {
  --pie-diameter: 400px;
  --center-hole-diameter: 200px;
  /* 用evenodd填充规则挖空中心圆 */
  clip-path: circle(calc(var(--pie-diameter)/2) at center) evenodd, circle(calc(var(--center-hole-diameter)/2) at center);
}

这个方案比单独调整每个扇区的渐变、手动计算阴影偏移量的维护成本低很多，后续不管饼图分多少片、扇区角度怎么动态变化，都不需要修改遮罩代码。

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