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 parent est width:100vw;height:100vh;position:fixed;background-color:rgb(000/0.25);backdrop-filter:blur(2px);z-index:8888;top:0;left:0; enfant Le style est background-color:transparent;width:200px;height:200

P粉043432210 · Answer

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