title: How to position canvas using relative/absolute positioning
body: <p>I am having trouble setting the location of a canvas relative to another, so I wrote the following test harness.  </p>
  
  <p>I would expect that the positioning specified by "top" amd "left" in the div's at the top of the harness would move the origin of the canvases relative to each other.  </p>
  
  <p>What am I doing wrong?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;form id='form1' style="position:relative"&gt;
    &lt;div id='d1' style="position:absolute; top:0; left:0; z-index:1"&gt;  
        &lt;canvas id='canvas1' width='200' height='100'&gt;
              Your browser does not support HTML5 Canvas.
        &lt;/canvas&gt;
    &lt;/div&gt;
    &lt;div id='d2' style="position:absolute; top:50; left:50; z-index:2"&gt;
        &lt;canvas id='canvas2' width='100' height='200'&gt;
              Your browser does not support HTML5 Canvas.
        &lt;/canvas&gt;
    &lt;/div&gt;
    &lt;div id='d3' style="position:absolute; top:75; left:75; z-index:3"&gt;
        &lt;canvas id='canvas3' width='50' height='50'&gt;
              Your browser does not support HTML5 Canvas.
        &lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;input id='btn1' type="button" onClick="demoDisplay()" value="Hide canvas with display property"&gt;
  &lt;input id='btn2' type="button" onClick="demoVisibility()" value="Hide canvas with visibility property"&gt;
  &lt;input id='btn3' type="button" onClick="demoOrder()" value="Place blue over red"&gt;
  
  &lt;/head&gt;
  &lt;body onLoad="loadMe()"&gt;
  
  
  &lt;script&gt;
  function loadMe()
  {
      var canvas = document.getElementById("canvas1");
      if (canvas.getContext) { // Canvas Support
         var ctx = canvas.getContext("2d");
         // Work with context
         var grd=ctx.createLinearGradient(0,0,ctx.canvas.height,ctx.canvas.width);
         grd.addColorStop(0,'#8ed6ff');
         grd.addColorStop(1,'#004cb3');
         ctx.fillStyle=grd;
         ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
         ctx.fill();
      }   
      var canvas = document.getElementById("canvas2");
      if (canvas.getContext) { // Canvas Support
         var ctx = canvas.getContext("2d");
         // Work with context
         var grd=ctx.createLinearGradient(0,0,ctx.canvas.height,ctx.canvas.width);
         grd.addColorStop(0,'#C00');
         grd.addColorStop(1,'#D00');
         ctx.fillStyle=grd;
         ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
         ctx.fill();
      }   
      var canvas = document.getElementById("canvas3");
      if (canvas.getContext) { // Canvas Support
         var ctx = canvas.getContext("2d");
         // Work with context
         var grd=ctx.createLinearGradient(0,0,ctx.canvas.height,ctx.canvas.width);
         grd.addColorStop(0,'#00C');
         grd.addColorStop(1,'#00D');
         ctx.fillStyle=grd;
         ctx.rect(0,0,ctx.canvas.width,ctx.canvas.height);
         ctx.fill();
      }   
  }
  
  function demoVisibility()
  {
      btn = document.getElementById('btn2')
      if (btn.value==='Hide canvas with visibility property') {
          btn.value = 'Show canvas with visibility property';
          document.getElementById("d2").style.visibility="hidden";
      } else {
          btn.value = 'Hide canvas with visibility property';
          document.getElementById("d2").style.visibility="visible";
      }
  }
  
  function demoDisplay()
  {
      btn = document.getElementById('btn1')
      if (btn.value==='Hide canvas with display property') {
          btn.value = 'Show canvas with display property';
          document.getElementById("d1").style.display="none";
      } else {
          btn.value = 'Hide canvas with display property';
          document.getElementById("d1").style.display="inline";
      }
  }
  
  function demoOrder()
  {
      btn = document.getElementById('btn3')
      if (btn.value==='Place blue over red') {
          btn.value = 'Place red over blue';
          document.getElementById("d1").style.zIndex=2;
          document.getElementById("d2").style.zIndex=1;
      } else {
          btn.value = 'Place blue over red';
          document.getElementById("d1").style.zIndex=1;
          document.getElementById("d2").style.zIndex=2;
      }
  }
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>