javascript - Css:绝对定位的 div 容器中的两个容器

Question

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

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

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

您想将两个 Canvas 放在彼此的顶部。要实现此目的，您应该使两个 Canvas position: avsolute ;顶部:0；左: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>