-1

我有 2 个画布层，它们位于彼此之上。

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

层的宽度为 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。如果有帮助，我知道如何获得屏幕的宽度。

4

2 回答 2

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>
于 2013-09-11T15:36:06.040 回答
0

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>
于 2013-10-30T14:01:05.610 回答