css - 两个画布在一个 div 容器中相互叠加？

Question

我一直试图让两个画布在另一个 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;
}

然后将画布容器的类更改为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;
}