css - 2 つのキャンバスが div コンテナー内で互いに重なり合っていますか?

Question

別のdiv内で2つのキャンバスを重ね合わせようとしましたが、そうしません。彼らはお互いの下に行き着きます。

私が設定した方法は次のとおりです。

.container{
    width:100%;
    height:300px;
    margin:0 auto;
}
.canvas{
    width:100%;
    height:100%;
    position:relative; 
    left: 0; 
    top: 0;
}

これを出力に使用します：

<div class="container">
  <canvas id="layer1" class="canvas" style="z-index:1;"></canvas>
  <canvas id="layer2" class="canvas" style="z-index:2;"></canvas>
</div>

どうすればこれを修正できますか？

Answer 1

position: relative親コンテナが設定されている必要があります

それに応じて CSS を変更します。

.container{
   width:100%;
   height:300px;
   margin:0 auto;
   position: relative; /* add */
}
.canvas{
   width:100%;
   height:100%;
   position:absolute; /* change */
   left: 0; 
   top: 0;
}

次に、キャンバス コンテナのクラスを次のように変更するかclass="canvas" 、CSS をcanvasドットなしで変更するか、必要に応じて CSS クラスを次のように変更します。.c

Answer 2

まず第一に、あなたのクラスはcではなくとしてラベル付けされていると思いますcanvas。

次に、(キャンバス上で) 相対を絶対に変更して、それらが互いに上に浮くようにする必要があります。

.canvas{
    width:100%;
    height:100%;
    position:absolute; 
    left: 0; 
    top: 0;
}

Answer 3

position: relativeキャンバスの変更absolute

.container{
    width:100%;
    height:300px;
    margin:0 auto;
    position:relative; /* this to make the canvases children of the div.container */
}

.canvas{
    width:100%;
    height:100%;
    position:absolute; /* this to position them */
    left: 0; 
    top: 0;
}