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在其中position: avsolute ; top:0 ; left : 0 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一個類，例如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是內聯元素，因此請在canvas元素上添加display:block ，以使其彼此重疊。 另外，div的高度應為畫布高度的2倍，以便同時包含兩個canvas元素。

 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>