Kann ein untergeordnetes Div übergeordnete Stile überschreiben und als Portal fungieren?

Question

Ich möchte ein übergeordnetes Div erstellen, das untergeordnete Divs enthält. Der übergeordnete Stil ist

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;

Der Unterstil ist

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

Gibt es eine Möglichkeit, dafür zu sorgen, dass sich ein untergeordnetes Element wie ein Portal verhält, wobei der Bereich, in dem es sich befindet, unscharf wird und die Hintergrundfarbe des übergeordneten Elements entfernt wird?

tl;Dr. Etwas, das so aussieht

Answer 1

--编辑--

如果问题是如何恢复子 div 中的背景过滤器，您可以使用

backdrop-filter: none;

但是，如果您想从父级的父级继承此属性，则需要在 JavaScript 中执行此操作

element.style.backdropFilter = element.parentNode.parentNode.style.backdropFilter;

---

在 CSS 中执行此操作的三种方法

1 使用相对 div 位置

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

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

2个使用ID

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

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

3 使用类

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

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