html - Canvas 不在 div 内

Question

你好，

我有以下问题:我有一个父 div，其中有一个图像和三个 Canvas 。 Canvas 彼此重叠，这应该是这样，但 Canvas 位于父 div 和图像旁边。为了说明我的问题，这里是它现在的样子的图像: .

如您所见，带有棋子棋子的三张 Canvas 和用于在这些棋子上绘画的另外两张 Canvas 并未放在棋盘上方。

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 将它与 Canvas 分层。

但是，我强烈建议您将背景图像放在 #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");}