html - canvasses aren't staying inside div -

hy,

i have following problem: have parent div, within image , 3 canvasses. canvasses laying on top of each other, should, canvasses laying next parent div , image. illustrate problem, here image of how looks now: .

as see, 3 canvases checker pieces , 2 other canvasses used drawing on top of pieces, aren't laying on top of checkerboard.

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

i hope made myself clear

zeno

you can make image absolutely positioned, can layer canvases using z-index.

however, i'd suggest put background image on #checkerboard element instead of using separate image. this:

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