Zwei Divs mit Schlagschatten auf gleicher Ebene

Question

Ich habe zwei Divs, die Schlagschatten haben und auf dem gleichen Z-Index sind.

Sie werfen derzeit beide einen Schatten auf einander.

Ich möchte, dass sie beide Schatten auf dem Hintergrund aber nicht auf einander werfen. Wie mache ich das?

Answer 1

Sie können nicht zwei verschiedene Elemente mit derselben Stapelebene verwenden. Elemente haben immer unterschiedliche Stapelebenen. Deshalb beschattet dein zweites Element das erste Element. (Ohne Z-Index bestimmt das Aussehen im DOM die Stapelebene)

Z-Index funktioniert nur bei nicht statischen Elementen (relativ, absolut), so dass auch das nicht hilft.

IMO Sie können den gewünschten Effekt nicht ohne ein wenig css-hacking erreichen (Deklarieren einer nicht-statischen Position auf den Elementen kombiniert mit einem zusätzlichen Wrapper-Element - deklarieren Sie den Z-Index nicht nur für den Parent auf den Kind-Elementen).

Example

Aber Sie fühlen sich frei, mich zu korrigieren, wenn ich falsch bin.

Answer 2

Verwenden Sie diesen einfachen CSS-Trick, erstellen Sie einfach pseudoelement :after, setzen Sie seinen Z-Index niedriger als divs und geben Sie ihm einen Schatten. Der folgende Code löscht nicht überlappende Schatten unter jeder div. Arbeitsbeispiel bei http://jsfiddle.net/on38a8pz/1/.

div { 
    position: relative; 
} 

div:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    box-shadow: 0 0 30px black; 
    z-index: -1; 
}