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

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>