холстов не находятся внутри сОн

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

Я надеюсь, что я ясно

Zeno

Answer 1

Вы можете сделать изображение абсолютно позиционирован, так что вы можете слой его вместе с холстами с использованием z-индекса.

Однако я настоятельно рекомендую вам разместить фоновое изображение на элементе #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");}