Question

我有一个绝对位置的div容器。我想在其中放置两个帆布容器，但它们应该在彼此之上而不是彼此相邻。

所有三个容器都具有相同的尺寸。

HTML：

<div height="100" width="100" style="position:absolute; left:10px; top: 10px;>
  <canvas height="100" width="100"></canvas>
  <canvas height="100" width="100"></canvas>
</div>

对不起这个问题，我对css不太熟悉。

Answer 1

你想把画布放在彼此的顶部。为了达到这个目的，你要同时制作画布position: avsolute ; top:0 ; left : 0
那么你的代码就像

<div height="100" width="100" style="position:absolute; left:10px; top: 10px;>
  <canvas height="100" width="100" style="position:absolute; left:0px; top:0px" ></canvas>
  <canvas height="100" width="100" style="position:absolute; left:0px; top:0px"  ></canvas>
</div>

你还可以做的是给canves一个类，例如.is-absolute
那么你的代码将是

<div height="100" width="100" style="position:absolute; left:10px; top: 10px;>
  <canvas height="100" width="100" class="is-absolute"></canvas>
  <canvas height="100" width="100" class="is-absolute"></canvas>
</div>

和css

<style>
 .is-absolute{
    position: absolute;
    top: 0;
    left :0;
  }
</style>

Answer 2

由于canvas默认为内嵌元素，因此向display:block元素添加canvas，以使它们相互显示。此外，div的高度应该是画布高度的2倍，以便包含两个画布元素。

canvas {
background: pink; /*only for the demo*/
display:block;
}

<div height="200" width="100" style="position:absolute; left:10px; top: 10px;">
  <canvas height="100" width="100"></canvas>
  <canvas height="100" width="100"></canvas>
</div>

Css：两个容器在一个绝对定位的div容器中彼此相对

2 个答案: