Javascript Css：在绝对定位的div容器中，两个容器彼此上方

我有一个绝对位置的div容器。我想在其中放置两个画布容器，但它们应该在彼此上方，而不是相邻

所有三个容器的尺寸相同

HTML:

---

由于默认情况下
canvas
是一个内联元素，因此在
canvas
元素中添加一个
display:block
，使它们相互重叠。此外，div的高度应该是canvas高度的2倍，以便包含这两个canvas元素


画布{
背景：粉色；/*仅用于演示*/
显示：块；
}
如果两个画布相互重叠，则希望将它们都放置在顶部。。要实现这一点，您应该使画布
位置：avsolute；排名：0；左：0


那么您的代码将是

<div height="100" width="100" style="position:absolute; left:10px; top: 10px;>
  <canvas height="100" width="100" style="position:absolute; left:0px; top:0px" ></canvas>
  <canvas height="100" width="100" style="position:absolute; left:0px; top:0px"  ></canvas>
</div>

和css

<style>
 .is-absolute{
    position: absolute;
    top: 0;
    left :0;
  }
</style>


.是绝对的{
位置：绝对位置；
排名：0；
左：0；
}
然后
canvas
将溢出
div
。canvas对象现在位于它们之间。
<div height="100" width="100" style="position:absolute; left:10px; top: 10px;>
  <canvas height="100" width="100" class="is-absolute"></canvas>
  <canvas height="100" width="100" class="is-absolute"></canvas>
</div>

<style>
 .is-absolute{
    position: absolute;
    top: 0;
    left :0;
  }
</style>