Box shadow based on z-index like Material Design

I've been looking at Material Design for a while and I wanted to recreate sheets of material merging together as seen in this video.

It looks simple but I just couldn't get the shadows to be working. Lets say each of the sheets has a z-index of 1. You would think the box-shadow of each element would fall behind the other element (because they are on the same z-index) but they actually stack.

I've tried putting the sheet and 'shadow' element in a container and making the sheet a higher z-index than the shadow but with multiple cards the shadow still appears above the cards.

So my question is: Is there a way to recreate these sheets merging together with the shadows of both always appearing behind the cards?

Thanks for reading!

Solution

The trick if you want the shadow to show on all 4 sides but not overlap, like between div 1 and 2, is to use a pseudo element.

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>