Can a child div override parent styles and act as a portal?

Question

I want to create a parent div that contains child divs. The parent style is

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;

sub style is

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

Is there a way to make a child element behave like a portal, with the area it's in having the parent div blur and background color removed?

tl;Ph.D. Something that looks like this

Answer 1

--edit--

If the question is how to restore the background filter in the child div, you can use

backdrop-filter: none;

However, if you want to inherit this property from the parent's parent, you need to do this in JavaScript

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

---

Three ways to do this in CSS

1 Use relative div position

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 usage 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 Using classes

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