CSS：画布大小不正确且不会分层

Question

所以我遇到了两种画布问题。

问题 1：画布大小不正确

我正在尝试制作一小堆漂亮的白框，但它们的大小无法正确适应其 div。

看看它们是如何超出绿色矩形底部的？它们应该完全适合填充边框。他们为什么不这样做？？

这是我的 HTML：

<div id="behindAll">
    <div id="dotTextList">
        <canvas id="dotCanvas1" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas2" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas3" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas4" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas5" class="dotTextCanvas"></canvas>
    </div>
</div>

这是我的 CSS：

#behindAll {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 100%;
  padding: 10px;
}

#dotTextList {
  box-sizing: border-box;
  background: green;
  width: 100%;
  height: 100%;
  padding: 10px;
}

.dotTextCanvas {
  box-sizing: border-box;
  height: 20%;
  width:100%;
  background-color: white;
}

我已将小白盒定义为它们父母的 20%，所以它们应该玩得很好，但事实并非如此。

问题 2：画布不会分层

最后，我想让五张白色画布在一个大背景画布前绘制自己。

这是我的 HTML：

<div id="behindAll">
    <canvas id="backgroundCanvas" />
    <div id="dotTextList">
        <canvas id="dotCanvas1" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas2" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas3" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas4" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas5" class="dotTextCanvas"></canvas>
    </div>
</div>

还有我的 CSS：

#behindAll {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 100%;
  padding: 10px;
}

#backgroundCanvas {
  z-index: 5;
  box-sizing: border-box;
  background: blue;
  width: 100%;
  height: 100%;
  padding: 10px;
}

#dotTextList {
  box-sizing: border-box;
  background: green;
  width: 100%;
  height: 100%;
  padding: 10px;
}

.dotTextCanvas {
  z-index: 9;
  box-sizing: border-box;
  height: 20%;
  width:100%;
  background-color: white;
}

结果如下：

白盒不见了！

我已经改变了事情的顺序，我尝试了 z-indexes（如你所见），但我似乎无法让那些白框 a) 大小合适 b) 在前面绘图蓝框。

感谢所有帮助！

Answer 1

这导致您遇到麻烦2：

（删除这个） <canvas id="backgroundCanvas" />

对不起，请用这个

<div id="behindAll">
    <canvas id="backgroundCanvas">
    <div id="dotTextList">
        <canvas id="dotCanvas1" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas2" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas3" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas4" class="dotTextCanvas"></canvas>
        <canvas id="dotCanvas5" class="dotTextCanvas"></canvas>
    </div>
    </canvas>
</div>

还有这个

#backgroundCanvas {
  box-sizing: border-box;
  background: blue;
  width: 100%;
  height: 100%;
  padding: 10px;
}

.dotTextCanvas {
  box-sizing: border-box;
  height: 20%;
  width:100%;
  background-color: white;
}

麻烦1：

（设置这个）

.dotTextCanvas {
  box-sizing: border-box;
  height: calc((100% - 20px)/5);
}