我需要在另一个上面显示一个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>然而，我似乎无法弄清楚如何将这两个画布居中，同时保持一个在另一个之上。 有任何想法吗？
I need to display one HTML5 canvas on top of another. This I have already managed in the following manner:
<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>However, I can't seem to figure out how to CENTER these two canvases while keeping one on top of the other. Any ideas?
最满意答案
创建一个带有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是position:relative 。
Make an outer container with text-align:center and position:relative, make an inner container with position:relative, put the canvases inside the inner container, remove left:0;top:0; on both canvases, and remove the position:absolute on the lower of the canvases. And make sure in the html that the lower canvas comes before the upper canvas, like you have.
#container { text-align:center; position:relative; } #inner_container{ position:relative; } #upper { z-index: 1; } #lower { position:absolute; z-index: 0; }http://jsfiddle.net/NW6Fx/
Edit: I believe the z-index property isn't needed if you do it this way. The order is just a matter of which canvas comes first in the html and which is position:relative.
更多推荐
发布评论