Kombinieren Z-Indizes verschachtelter Elemente von zwei verschiedenen Eltern und deren Stapelkontext

Question

Ich habe im Internet nach einer Lösung für mein Problem gesucht. Die gesamte Dokumentation, die ich bisher gefunden habe, weist darauf hin, dass das, was ich erreichen möchte, nicht möglich ist. Nun, ist es so? Beschreibung des Problems in Worten:

• Ich habe mehrere Entitäten, bei denen jede Entität eine halbtransparente Überlagerung hat.
• Die Überlagerung muss gerendert werden hinter alle anderen Entitäten einschließlich der übergeordneten Entität.
• Ich habe ein Beispiel in der Abbildung unten zur Verfügung gestellt.

Nun ist die Herausforderung Teil diese 2 einfachen Regeln:

• Parent Entity A und Parent Entity B müssen Geschwister zueinander
• Overlay A muss ein KindParent A sein werden, und Gleiches gilt für

Können wir den Stacking-Kontext austricksen, um dieses Bild unten zu erreichen?

Eine JS-Lösung kann auch willkommen sein, aber wissen, dass ich React verwende und ich kann nicht direkt DOM-Manipulation tun, und die Eltern & Geschwister-Beziehung ist ein Muss.

Hier ist ein JS fiddle playground, um Ihnen zu helfen, damit zu experimentieren. Geige ist nicht die Lösung, sie hat Überlagerungen als Geschwister zu den Elternteilen.

Versuchen Sie, die Overlays innerhalb ihrer Eltern zu verschachteln.

Answer 1

Sie können z-index von den Entitäten entfernen sie von der Erstellung Stapel Kontexten, zu verhindern und eine negative z-index auf den Overlays verwenden sie hinter zu platzieren.

Im folgenden Code definiere ich die Überlagerungen über Pseudo-Elemente wegen der Semantik, aber mit echten Kind-Elementen würde es genau das gleiche funktionieren.

#entities-wrapper { 
 
    position: relative; /* Only the wrapper (and overlays) establish */ 
 
    z-index: 0;   /* stacking contexts, entities don't.  */ 
 
} 
 
.entity, .entity::after { 
 
    position: absolute; 
 
} 
 
.entity { /* Do not use z-index here */ 
 
    width: 100px; 
 
    height: 100px; 
 
    text-align: center; 
 
    font-size: 16px; 
 
    line-height: 100px; 
 
} 
 
.entity::after { /* This is the overlay */ 
 
    content: ''; 
 
    display: block; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -150px; 
 
    margin-top: -150px; 
 
    width: 300px; 
 
    height: 300px; 
 
    background: rgba(0,0,0,0.25); 
 
    border-radius: 150px; 
 
    z-index: -1; /* Behind the entities */ 
 
} 
 
#a { 
 
    background: red; 
 
    top: 150px; 
 
    left: 200px; 
 
} 
 
#b { 
 
    background: yellow; 
 
    top: 150px; 
 
    left: 350px; 
 
}

<div id="entities-wrapper"> 
 
    <div id="a" class="entity">parent entity A</div> 
 
    <div id="b" class="entity">parent entity B</div> 
 
</div>