Bolehkah div kanak-kanak mengatasi gaya ibu bapa dan bertindak sebagai portal?

Question

Saya ingin mencipta div induk yang mengandungi div anak. Gaya ibu bapa ialah

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-gaya ialah

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

Adakah terdapat cara untuk menjadikan elemen kanak-kanak berkelakuan seperti portal, dengan kawasan div ibu bapa kabur dan warna latar belakang dialih keluar?

tl;Dr. Sesuatu yang kelihatan seperti ini

Answer 1

--Edit--

Jika persoalannya ialah bagaimana untuk memulihkan penapis latar belakang dalam div kanak-kanak, anda boleh menggunakan

backdrop-filter: none;

Namun, jika anda ingin mewarisi harta ini daripada ibu bapa ibu bapa, anda perlu melakukannya dalam JavaScript

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

---

Tiga cara untuk melakukan ini dalam CSS

1 Gunakan kedudukan div relatif

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 penggunaan

#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 kelas penggunaan

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