Сянка на кутията, базирана на z-индекс, като Material Design - css, z-index, материал-дизайн, сянка

Аз гледах Материал Дизайн за известно време и аз исках да пресъздаде листове от материали сливане заедно, както се вижда това видео.

Изглежда просто, но просто не можах да го направясенките да работят. Нека кажем, че всеки от листовете има z-индекс от 1. Бихте мислили, че сянката на всеки елемент ще падне зад другия елемент (защото те са на един и същ z-индекс), но те всъщност са стекали.

Опитах да сложа листа и елемента "сянка" в контейнер и да направя листа по-висок z-индекс от сянката, но с няколко карти, сянката все още се показва над картите.

Така че въпросът ми е: Има ли начин да се пресъздадат тези листове, които се сливат заедно със сенките на двете, които винаги се появяват зад картите?

Благодаря за четенето!

Отговори:

Номерът, ако искате сянката да се показва на всичките 4 страни, но не се припокрива, както между разделите 1 и 2, е да използвате псевдо елемент.

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>