如何让子Div覆盖父级样式，实现类似Portal的效果？

我想要创建一个包含子Div的父Div，父级样式如下：

width: 100vw;
height: 100vh;
position: fixed;
background-color: rgb(0 0 0 / 0.25);
backdrop-filter: blur(2px);
z-index: 8888;
top: 0;
left: 0;

子级样式如下：

background-color: transparent;
width: 200px;
height: 200px;
position: absolute;
left: 400px;
top: 400px;

请问是否有办法让子Div如同Portal一样，使所在区域移除父Div的模糊效果与背景色？简言之，就是让子Div所在位置直接显示背后内容，不受父元素的半透明背景和模糊滤镜影响。

方法1：伪元素分离父级效果，子元素层级覆盖 #

把父元素的背景色和backdrop-filter移到伪元素上，通过层级控制让子元素“穿透”显示背后内容，这是最灵活的方案：

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 8888;
  top: 0;
  left: 0;
  /* 移除原有的背景色和模糊滤镜 */
}

.parent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(2px);
  z-index: -1; /* 伪元素层级低于父容器内的子元素 */
}

.child {
  background-color: transparent;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 400px;
  top: 400px;
  z-index: 1; /* 确保子元素层级高于伪元素 */
}

方法2：clip-path给模糊层挖洞 #

如果必须保留父元素原有结构，可以给父元素的伪元素添加clip-path，把子元素所在区域“挖空”：

.parent {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 8888;
  top: 0;
  left: 0;
}

.parent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 0.25);
  backdrop-filter: blur(2px);
  /* 根据子元素位置和尺寸挖空矩形区域 */
  clip-path: polygon(
    0 0, 
    0 100%, 
    400px 100%, 
    400px 400px, 
    600px 400px, 
    600px 600px, 
    400px 600px, 
    400px 0, 
    100% 0, 
    100% 100%
  );
}

.child {
  background-color: transparent;
  width: 200px;
  height: 200px;
  position: absolute;
  left: 400px;
  top: 400px;
}

注意：clip-path的坐标需要根据子元素的位置（left=400px，top=400px）和尺寸（200x200）计算，挖掉的是(400,400)到(600,600)的矩形区域。如果子元素位置动态变化，需要用JS实时修改clip-path的值。

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