我正在构建一个网格，在其中我将有一排排的“细胞”和项目，覆盖特定的细胞。
目标是模拟此

它由一个父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;
}

个字符
盒子的阴影不在下面的那一行.

的
我知道这与堆栈上下文有关。但这实际上可以按照我想要的方式完成吗？