定位重叠的画布 [英] Positioning overlapping canvas

问题描述

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

I've got a page that is supposed to display a line graph. There is a title at the top, the graph in the middle, then a table below them. It is laid out roughly like this:

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

现在每个'div'块都保持分开，这是好的。然而，两个画布，尽管具有不同的z-index值，彼此相邻，而不是堆叠在顶部。我已经读过他们的位置值应该设置为绝对，但每当我这样做，表立即移动到画布的顶部。

Right now each of the 'div' blocks are staying separate from each other, which is good. However, the two canvas's, despite having different z-index values, are next to each other instead of stacking on top. I've read that their position values should both be set to absolute, but whenever I do this, the table immediately moves on top of the canvas.

什么位置和显示值，我需要设置为div和其中的元素，以获得彼此之上的帆布（两者是相同的维度），没有任何东西堆叠在他们的div顶部？

What position and display values do I need to set to the div's and the elements inside them to get the canvasses on top of each other (both are the same dimensions) without anything else stacking on top of their div?

编辑：以下是小提琴

推荐答案

HTML ：

将2个画布封装在封装div中。

Wrap the 2 canvases inside a wrapper div.

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

CSS：

将2个画布置于同一顶部&相对于包装器div。

Position the 2 canvases at the same top & left relative to the wrapper div.

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

这篇关于定位重叠的画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！