Question

我有两个相互叠加的画布层。

但是我需要相对于页面定位它们。

图层的宽度为800，高度为300。

无论屏幕大小如何，我都想让它居中，并且还要为每个尺寸的屏幕调整高度。

目前我正在使用：

<div>
    <canvas id="canvas" width="800" height="300"  style="position: absolute; left:20%; top: 40%; z-index: 0;"></canvas>
    <canvas id="canvasAnimation" width="800" height="300"  style="position: absolute; left: 20%; top: 40%; z-index: 0;"></canvas>
</div>

并使用大量<br>为其放置空间。

我也在使用jQuery。如果有帮助，我知道如何获得屏幕的宽度。

Answer 1

您可以使用以下代码并设置容器的宽度，其余全部将自动设置：

<div id="container" style="float:left; width:100px; height:200px;">
   <div style="position:relative; border:1px solid black; width:100%; height:100%">
     <canvas id="canvas" style="position: absolute; left:10%; top: 40%; z-index: 0;border:1px     solid #000000;background-color:red;width:80%; height:30%">CANVAS 1</canvas>
     <canvas id="canvasAnimation" style="position: absolute; left: 5%; top: 40%; z-index: -1;border:1px solid #000000;background-color:green;width:90%; height:30%">CANVAS 2    </canvas>
   </div>
</div>

Answer 2

Nikhil Doomra给出的答案接近了。

如果您只是将以下样式代码添加到容器中，它将始终位于页面中心（如果页面宽于对象）：

margin-left: auto; 
margin-right: auto;

因此代码将导致此：

<div id="container" style="margin-left: auto; margin-right: auto; width:100px; height:200px;">
  <div style="position:relative; border:1px solid black; width:100%; height:100%">
    <canvas id="canvas" style="position: absolute; left:10%; top: 40%; z-index: 0;border:1px     solid #000000;background-color:red;width:80%; height:30%">
      CANVAS 1
    </canvas>
    <canvas id="canvasAnimation" style="position: absolute; left: 5%; top: 40%; z-index: -1;border:1px solid #000000;background-color:green;width:90%; height:30%">
      CANVAS 2
    </canvas>
  </div>
</div>

多个画布层定位HTML5

2 个答案: