Javascript 定位重叠画布

我有一个页面应该显示一个折线图。顶部有一个标题，中间有一个图表，下面是一个表格。大致如下：

<div>
    <h1>Title</h1>
</div>
<div>
    <canvas1></canvas>
    <canvas2></canvas>
</div>
<div>
    <table></table>
</div>

标题

现在，每个“div”块都彼此分开，这很好。然而，尽管两个画布的z索引值不同，但它们彼此相邻，而不是堆叠在顶部。我已经读到，它们的位置值都应该设置为绝对值，但每当我这样做时，表就会立即在画布上移动

我需要为div及其内部的元素设置什么位置和显示值，以使画布彼此重叠（两个维度相同），而不在其div顶部堆叠任何其他内容

编辑：这里有一个

HTML:

将两张画布包装在包装袋内

<div id="wrapper">
    <canvas id="canvasBottom" width=300 height=200></canvas>
    <canvas id="canvasTop" width=300 height=200></canvas>
</div>

#wrapper{
    position:relative;
    width:300px;
    height:200px;
}
#canvasTop,#canvasBottom{
    position:absolute; top:0px; left:0px;
    width:300px;
    height:200px;
}

如果您将两个画布的“position”属性设置为“absolute”，那么两个画布将粘附到父元素，例如，您的div。 桌子在画布上移动的原因是，从某种意义上说，桌子“忽略”了画布，它的位置就像没有画布一样。 您应该做的是保持画布的绝对位置值，并将表的“top”值设置为画布的高度，然后表将正好位于画布下方。 让我举个例子：

动物世界
帆布{
宽度：50%；
高度：100px；
位置：绝对位置；
}
#狗{
z指数：1；
}
#猫{
z指数：0；
背景颜色：蓝色；
}
桌子{
背景色：rgb（196255 216）；
位置：相对位置；
顶部：100px；
边界塌陷：塌陷；
}
标题{
字体大小：粗体；
字号：2em；
背景色：rgb（196255 216）；
边框：1个浅蓝色凹槽；
}
td，th{
边框：1个浅蓝色凹槽；
}
动物
var dog=document.getElementById（'dog'）；
var cat=document.getElementById（'cat'）；
var dog_ctx=dog.getContext（'2d'）；
var cat_ctx=dog.getContext（'2d'）；
dog_ctx.fillStyle=“红色”；
dog_ctx.fillRect（20,20,20,20）；
动物
狗
熊猫
猫
中间的
大的
小的

发布a会有所帮助。这似乎让画布相互重叠，但出于某种原因，它扭曲了我的图表。我将不得不进一步调查。但这是朝着正确方向迈出的一步！CSS会扭曲画布内容。所以，试着像我在修改后的答案中所做的那样，对画布的宽度/高度进行编码。这样就得到了正确的尺寸。不过现在，我已经将表格显示在图表的底部。如果所有的div都设置为display:block，那就不会发生，对吗？