Box tieň založená na z-index ako materiálový dizajn - css, z-index, materiál-dizajn, tieň

Dúfam, že sa na materiálový dizajn na chvíľu pozrieme a chcel som znovu vytvoriť listy materiálu, ktoré sa zlúčia, ako vidíte toto video.

Vyzerá to jednoducho, ale jednoducho som to nemohol dostaťtiene, ktoré majú fungovať. Povedzme, že každý z hárkov má z-index 1. Myslíte si, že tieňové pole každého prvku by zaostalo za druhým prvkom (pretože sú na rovnakom z-indexu), ale v skutočnosti sú stohované.

Pokúsil som sa položiť list a "tieň" prvok do kontajnera a vytvoriť list vyšší z-index ako tieň, ale s viacerými kartami tieň stále zobrazuje nad kartami.

Takže moja otázka je: Existuje spôsob, ako obnoviť tieto listy zlúčené spolu s tieňmi oboch, ktoré sa vždy objavujú za kartami?

Vďaka za prečítanie!

odpovede:

Trik, ak chcete, aby sa tieň zobrazoval na všetkých 4 stranách, ale nepresahuje sa, ako medzi divmi 1 a 2, je použitie pseudo elementu.

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>