javascript - 定位重叠 Canvas

Question

我有一个应该显示折线图的页面。顶部有一个标题，中间有图表，然后是它们下面的表格。它的布局大致如下:

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

现在每个“div” block 都彼此分开，这很好。然而，尽管两个 Canvas 具有不同的 z-index 值，但它们彼此相邻而不是堆叠在顶部。我读到它们的位置值都应设置为绝对值，但每当我这样做时，表格都会立即移动到 Canvas 顶部。

我需要为 div 和其中的元素设置什么位置和显示值，以使 Canvas 彼此重叠(两者尺寸相同)，而没有其他任何东西堆叠在它们的 div 之上？

编辑:这是一个fiddle

Answer 1

HTML:

将 2 个 Canvas 包裹在包装器 div 中。

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

CSS:

将 2 个 Canvas 放置在相对于包装器 div 的同一顶部和左侧。

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