我正在构建一个网格，在该网格中，我将拥有覆盖特定单元格的多行"单元格"和项目.
The goal is to emulate this
它由一个父div(整个网格)和多个单元格(浅蓝色)组成.然后，卡片(黄色)是特定单元格的子级，位置:绝对，并覆盖在顶部.
这使得堆叠上下文能够在所有单元中保持相同，因为它们都是同一父单元的一部分.
我想做的是在它们自己的父行div中设置每一行单元格(一张卡片位于一行).
问题是黄牌的框影在这种格式下不能正确显示.
.container {
width: 100px;
height: 50px;
position: relative;
}
.one {
position: absolute;
top: 0;
border: 1px solid black;
height: 100%;
width: 70px;
box-shadow: 5px 5px blue;
background-color: lightyellow;
}
.two {
background-color: coral;
height: 100%;
position: absolute;
top: 0px;
border: 1px solid grey;
}
.three {
border: 1px solid green;
width: 100%;
height: 100%;
background-color: lightblue;
}<div class='container'>
<div class='one'>
One
</div>
<div class='three'>
</div>
</div>
<div class='container'>
<div class='two'>
Two
</div>
<div class='three'>
</div>
</div>长方体阴影不在下面的一行中.
我理解这与堆叠上下文有关. 但这真的能按照我想要的方式来做吗？