1

我需要在另一个之上显示一个 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>

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

4

3 回答 3

3

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

div#canvasContainerId {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
}
  • position: relative导致es 的定位相对于它们的absolute包含.<canvas><div>
  • 边距auto以及固定的width.<div>
于 2013-06-27T16:59:03.470 回答
1

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.

于 2013-06-27T17:09:53.733 回答
0

您可以在它们之间放置一条分隔线<br/>

或者

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

{
    margin:auto;
    clear:both;
}

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

于 2013-06-27T16:57:24.850 回答