Cień w ramce oparty na indeksie z, takim jak Material Design - css, indeks z-z, material-design, shadow

Przez jakiś czas patrzyłem na Material Design i chciałem odtworzyć arkusze materiału łączące się ze sobą, jak widać ten film.

Wygląda to prosto, ale po prostu nie mogłem tego zdobyćcienie do pracy. Powiedzmy, że każdy z arkuszy ma indeks z. 1. Można by pomyśleć, że cień każdego elementu będzie się znajdował za drugim elementem (ponieważ są one na tym samym indeksie Z), ale faktycznie się stosują.

Próbowałem umieścić arkusz i element "cień" w kontenerze i nadać arkuszowi wyższy indeks z niż cień, ale z wieloma kartami cień nadal pojawia się nad kartami.

Moje pytanie brzmi: Czy istnieje sposób na odtworzenie tych arkuszy w połączeniu z cieniami obu, które zawsze pojawiają się za kartami?

Dziękuje za przeczytanie!

Odpowiedzi:

Sztuczka, jeśli chcesz, aby cień pokazywał się na wszystkich 4 stronach, ale nie nakładał się, jak między działami 1 i 2, to użycie pseudoelementu.

div {
position: relative;
width : 200px;
height: 100px;
background-color: #ddd;
box-shadow: 0px 3px 3px #666;
text-align: center;
}
div:nth-child(3) {
margin-top: 20px;
}

div:after {
content: "";
left: 2px;
right: 2px;
height: 10px;
top: 0;
left: 0;
position: absolute;
z-index: -1;
box-shadow: 0px -1px 3px #aaa;
}

<div>1</div>
<div>2</div>
<div>3</div>