fixed定位元素层级异常：clip-path导致内部元素被覆盖

嘿，这个问题我之前也碰到过，本质是CSS堆叠上下文在搞鬼！咱们先理清楚为什么会这样：

当你给红色fixed元素的父div加上clip-path属性时，这个div会创建一个新的堆叠上下文。本来fixed元素的堆叠层级是相对于根元素（html）的，所以你之前用z-index能轻松让红色元素压在黑色上面；但现在父div有了自己的堆叠上下文，内部的红色fixed元素就被“圈”在这个局部上下文里了——它的z-index只能在这个父div内部生效，没法突破出去和属于根上下文的黑色fixed元素竞争层级，自然就被盖住了。

而且顺便提一句：父元素加了clip-path后，红色fixed元素的包含块也会从视口变成这个父div，相当于它的定位不再是真正的fixed，而是类似absolute相对于父元素，这可能还会影响你的布局位置，这点也要注意。

下面给你几个可行的解决方案，按需选择：

方案1：把clip-path直接加到红色fixed元素上（最推荐） #

如果你的裁剪需求只针对红色元素本身，完全没必要给父div加clip-path。直接把裁剪属性移到红色fixed元素上，这样父div不会创建新的堆叠上下文，红色元素依然属于根堆叠上下文，z-index就能正常和黑色元素比拼了，同时自身也能被裁剪。

示例代码：

html, body { 
  width: 100%; 
  height: 100%; 
  margin: 0;
}

.box {
  height: 80vh;
  width: 100%;
  /* 移除这里的clip-path */
}

/* 黑色fixed元素 */
.b1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: black;
  z-index: 0;
}

/* 红色fixed元素 */
.red-fixed {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  background: red;
  /* 把裁剪路径移到这里 */
  clip-path: inset(10% 20% 30% 40%);
  z-index: 1; /* 确保比黑色元素层级高 */
}

方案2：给父div设置定位和更高的z-index（如果必须保留父div的clip-path） #

如果父div一定要用clip-path（比如要裁剪多个元素），那你可以给父div加上position: relative（或者其他非static定位），再设置一个比黑色元素更高的z-index。这样父div的堆叠上下文会被提升，内部的红色fixed元素也会跟着这个上下文一起压在黑色元素上方。

注意：这个方案可能会影响页面其他元素的堆叠顺序，调整时要留意全局布局。

示例代码：

.box {
  height: 80vh;
  width: 100%;
  position: relative; /* 必须设置非static定位，z-index才会生效 */
  z-index: 1; /* 数值要比黑色元素的z-index大 */
  clip-path: inset(10% 20% 30% 40%); /* 保留父div的裁剪 */
}

.red-fixed {
  position: fixed;
  background: red;
  z-index: 1; /* 这个z-index只在父div的上下文内部有效，只要比内部其他元素高就行 */
}

.b1 {
  position: fixed;
  background: black;
  z-index: 0;
}

额外提醒 #

如果用了方案2，记得检查红色元素的定位是否符合预期——因为父div有clip-path，红色fixed的包含块变成了父div，它的定位会相对于父div而不是视口，这可能和你原本的fixed需求不符。所以还是优先考虑方案1，既能满足裁剪，又能保留fixed的视口定位特性。

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