css - 在一个 div 容器中，两个 Canvas 层叠在一起？

Question

我一直试图让两个 Canvas 在另一个 div 中时彼此重叠，但他们不会这样做。他们最终在彼此之下。

我的设置方式是这样的:

.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;
}

然后将 Canvas 容器的类更改为 class="canvas" 或者将 CSS 更改为不带点的 canvas 或者如果您更喜欢将 CSS 类更改为.c