画布不是留在div里面

Question

HY，

我有以下问题：我有一个父div，在一个图像和三个画布。画布正在彼此叠加，应该，但画布正在父div和图像旁边。为了说明我的问题，这里是一个现在的样子图像：。

如你所见，带有棋子的三幅画布和另外两张用于在这些棋子上画画的画布，并没有放在棋盘上。

HTML：

<div id="container">
<div id="checkerboard" class="checkerboard">
    <img src="../images/checkerboard.png">
    <canvas id="canvas_checkers" class="canvas_checkers" width="650" height="650"></canvas>
    <canvas id="canvas_checkers_mouse" class="canvas_checkers" width="650" height="650"></canvas>
    <canvas id="canvas_checkers_selected" class="canvas_checkers" width="650" height="650"></canvas>
</div>
<div id="chat">
    <ul id="chatlist">

    </ul>
</div>
</div>

CSS：

#container {
    width: 1254px;
    height: 650px;
    margin: auto;
}

#chat {
    width: 300px;
    height: 650px;
    background: rgb(140, 140, 140);
    float: right;
}

#checkerboard {
    width: 654;
    height: 650;
    float: left;
    position: relative;
}

.canvas_checkers{
    float: left;
    width: 650px;
    height: 650px;
    position: absolute;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

我希望自己清楚明白

芝诺

Answer 1

您可以使图像绝对定位，因此您可以使用z-index将其与画布一起分层。

但是，我强烈建议您在#checkerboard元素上放置背景图像，而不是使用单独的图像。像这样：

HTML

<div id="checkerboard" class="checkerboard">
    <canvas id="canvas_checkers" class="canvas_checkers" width="650" height="650"></canvas>
    <canvas id="canvas_checkers_mouse" class="canvas_checkers" width="650" height="650"></canvas>
    <canvas id="canvas_checkers_selected" class="canvas_checkers" width="650" height="650"></canvas>
</div>

CSS

#checkerboard {background-image: url("../images/checkerboard.png");}