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导致absolute es的<canvas>定位变为相对于其<div>。{/ li>
auto边距以及固定width，以<div>为中心。

Answer 2

创建一个带有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。

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

3 个答案: