Question

I’m creating an drawing application with HTML5 canvas but is having problems with positioning.

I have a div where I dynamically put the canvas. The div has a top div and a bottom div and I want to place the canvas in the middle. As it is now the canvas overlaps the top div and therefore I want to move it down. I have tried styling the canvas (position: absolut, top: 40) but nothing happens. How can I accomplish this?

$('<canvas/>', {
  'id': 'paint',
}).appendTo('#box');

var theCanvas = document.getElementById('paint');
theCanvas.width  = 420;
theCanvas.height = 300;

The div looks like this:

-----------------
     top div       
-----------------


    canvas


-----------------
    bottom div
-----------------

Styling for the divs:

#box {
  position: absolute;
  left:50px;
  top: 60px;  
  margin-left: auto;
  margin-right: auto;
}

.topDiv {
  position: absolute;
  top: 0;
  height: 60px;
  overflow: hidden;
}

.bottomDiv {
  position: absolute;
  bottom: 0px;
}

The top div and bottom div is inside #box.

Answer 1

I’ve made a couple of assumptions as to exactly what you’re trying to accomplish. Based upon what you I think you want to do, which I assume is have a box that contains two div’s, and a canvas (and can be anywhere on the screen, potentially), I mocked up the html as:

<div id="box">
    <div class="topDiv">
        this is the top div
    </div>
    <div class="bottomDiv">
        this is the bottom div
    </div>
</div>

And, I’d suggest changing your javascript so you insert your canvas before the bottomDiv.

$('<canvas/>', {
    'id': 'paint',
}).insertBefore('#box .bottomDiv');

And changing your class styling on bottomDiv and topDiv so that they are position: relative. This should accomplish what you’re looking for. Basically the #box controls the position of the group, and the top and bottom div’s stay fixed in that group of controls.

Here’s a jsFiddle with some border colors to show where the boxes are: http://jsfiddle.net/fordlover49/HKtn5/