如何将两幅画布相互叠加？

Question

我需要在另一个上面显示一个HTML5画布。 我已经按以下方式管理：

<canvas id="lower" width="900" height="550" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="upper" width="900" height="550" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>

然而，我似乎无法弄清楚如何将这两个画布居中，同时保持一个在另一个之上。 有任何想法吗？

Answer 1

将它们放在带有样式的<div> ：

div#canvasContainerId {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
}

• position: relative导致<canvas> es的absolute定位变为相对于其包含的<div> 。
• auto边距以及固定width使<div>居中。

Answer 2

创建一个带有text-align:center的外部容器text-align:center和position:relative ，创建一个position:relative的内部容器，将画布放在内部容器中，删除left:0;top:0; 在两幅画布上，并删除position:absolute在画布的下方。 并确保在html中，较低的画布位于上部画布之前，就像你一样。

#container {
  text-align:center;
  position:relative;
}

#inner_container{
  position:relative;
}
#upper {
  z-index: 1;
}
#lower {
  position:absolute; z-index: 0;
}

http://jsfiddle.net/NW6Fx/

编辑 ：我相信如果你这样做，就不需要z-index属性。 顺序只是一个问题，哪个画布首先在html中，哪个是position:relative 。

Answer 3

你可以把它们之间的断裂线<br/>

要么

可能会尝试给他们每个人以下css：

{
    margin:auto;
    clear:both;
}

绝对定位你应该使用top。 例如，对于第一个，放top: 50px 。 这将使第一个元素从顶部移开 50px。 对于第二个，放top: 100px 。