Due div con ombreggiatura sullo stesso livello

Question

Ho due div che hanno ombre esterne e sono sullo stesso z-index.

Attualmente stanno entrambi proiettando un'ombra l'una sull'altra.

Vorrei che entrambi proiettassero ombre sullo sfondo ma NON l'una sull'altra. Come faccio a fare questo?

Answer 1

Non è possibile avere due elementi diversi con lo stesso livello di impilamento. Gli elementi hanno sempre diversi livelli di impilamento. Ecco perché il tuo secondo elemento ombreggia il primo elemento. (Senza z-index, l'apparenza nel DOM determina il livello di impilamento)

Z-index funziona solo su elementi posizionati non statici (relativi, assoluti), quindi non sarà di alcun aiuto.

IMO non è possibile ottenere l'effetto desiderato senza alcuni piccoli css-hacking (dichiarare una posizione non statica sugli elementi combinata con un elemento wrapper aggiuntivo - non dichiarare z-index sul genitore ma solo sugli elementi del bambino).

Example

Ma non esitate a correggermi se sbaglio.

Answer 2

Usa questo semplice trucco CSS, crea solo uno pseudoelemento , imposta il suo z-index più basso di div e dona un'ombra. Il codice seguente rilascia ombre non sovrapposte sotto ogni div. Esempio di lavoro allo 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; 
}