Aligning HTML elements over canvas

Question 1

Put a wrapper div around your form and canvas elements.

Take the canvas out of your form element!

Then make the wrapper-div position:relative and both the form & canvas position:absolute

Result...Your select element is aligned where you want it!

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/5UzhE/

<!doctype html>
<html>
<style>
#wrapper{position:relative;}
#d1{position:absolute top:0; left:0; z-index:1; }
#c1{width:310px; height:300px; border:1px solid #d3d3d3;}
#h1{position:absolute; top:140px; left:140px; z-index:2; }
</style>
<head>
  <div id="wrapper" style='position:relative'>

    <form id='h1';>
      <select id='s1' style='position:absolute; z-index:2'>
          <option value='Please select'>Please select</option>
      </select>
    </form> 

    <div id='d1'>
      <canvas id="c1" width="310" height="300">
        Your browser does not support the HTML5 canvas tag.
      </canvas>
    </div>

  </div>
</head>
<body>
  <script type="text/javascript">
    var can=document.getElementById("c1");
    var ctx = can.getContext("2d");   
    ctx.font = 'bold 18px Arial, Helvetica, sans-serif';;
    ctx.textAlign='right';
    ctx.fillStyle ='#CCC';      
    ctx.fillText("Align Me", 130, 160);
  </script> 
</body>
</html>

Question 2

I gave markE credit for answering this. He had a lot of good suggestions and pointed me to the answer. After studying his solution, it turned out all I really needed was the proper format for javascript setting the position. I had "ele.style.top = 140;" and what I should have had was "ele.style.top = '140px';". So, here is a solution with minimal changes (this will become computer generated code, not something that will be maintained by hand, so I am not as concerned with changes such as pulling out style sheets). Here is a fiddle of the solution: http://jsfiddle.net/vfanberg/KCZ5g/

<!doctype html>
<html>
<head>
  <form id='h1'; style='position:relative'>
    <div id='d1' style="position:absolute; top:0; left:0; z-index:1">
      <canvas id="c1" width="310" height="300" style="border:1px solid #d3d3d3">
        Your browser does not support the HTML5 canvas tag.
      </canvas>
    </div>

     <select id='s1' style='position:absolute; z-index:2'>
        <option value='Please select'>Please select</option>
     </select>
  </form> 
</head>
<body>
  <script type="text/javascript">
    var can=document.getElementById("c1");
    var ctx = can.getContext("2d");   
    ctx.font = 'bold 18px Arial, Helvetica, sans-serif';;
    ctx.textAlign='right';
    ctx.fillStyle ='#CCC';      
    ctx.fillText("Align Me", 130, 160);

    var ele = document.getElementById('s1');
    ele.style.top = '140px';
    ele.style.left= '140px';
  </script> 
</body>
</html>