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

首先，我认为您的课程标记为c而不是canvas。

其次，需要将相对值更改为绝对值（在画布上），以便它们可以相互浮动。

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

Answer 2

父容器需要设置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而不使用点OR如果您愿意将CSS类更改为.c

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

两个帆布＆＃39; div容器中彼此叠加？

3 个答案: