Un div enfant peut-il remplacer les styles parents et agir comme un portail ?

Question

Je souhaite créer un div parent contenant des div enfants. Le style des parents est

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;

Le sous-style est

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

Existe-t-il un moyen de faire en sorte qu'un élément enfant se comporte comme un portail, avec la zone dans laquelle il se trouve en supprimant le flou du div parent et la couleur d'arrière-plan ?

tl;Dr. Quelque chose qui ressemble à ça

Answer 1

--Modifier--

Si la question est de savoir comment restaurer le filtre d'arrière-plan dans le div enfant, vous pouvez utiliser

backdrop-filter: none;

Cependant, si vous souhaitez hériter de cette propriété du parent du parent, vous devez le faire en JavaScript

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

---

Trois façons de procéder en CSS

1 Utiliser la position relative 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 identifiants d'utilisation

#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 classes d'utilisation

.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;
}