How to create HTML radio buttons above the Raphael canvas layer in my case?

I have created a Raphael paper:

var paper = Raphael("my-canvas", '100%', '100%');

I would like to create some HTML radio buttons which are above the paper canvas layer, which means anything drawing on the paper will not cover(hide) the HTML radio buttons but behind the radio buttons.

What I have tried are illustrated below:

My 开发者_Go百科HTML page:

...
<div id="layers">
  <div id="my-canvas">
  <div id="my-radio-btn">
     <input type="radio" value="apple" name="firstRadio"> Apple
     <input type="radio" value="orange" name="secondRadio"> Orange
  </div>
</div>
...

The CSS for the above page:

#layers {
  position: relative;
  border: 1px solid #666;
  border-color: #72f342;
  margin-top: 10px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
  width: 800px;
  height: 800px;
}
#my-canvas {
  position: absolute;
  cursor: move;
}

With the above code, the radio buttons are there, but if there is a Raphael object drawing on the same position of the radio buttons, the buttons are hided by the Raphael object, but what I want is to have the Raphael object behind the radio button, that's the HTML radio button layer is on top of the Raphael canvas layer.

How to get this feature?

Try changing the z-index property of each div (my-canvas, my-radio-btn)? I mean something like this:

#my-canvas {
   z-index: 1;/*what you want but less than my-radio-btn*/
}
#my-radio-btn {
   z-index: 1000;/*greater than my-canvas*/
}

This works for me, I have a map app with some divs floating over the raphael object. You should also be careful with the positioning of your divs. I'm using absolute positioning.