在我的情况下，如何在 Raphael 画布层上方创建 HTML 单选按钮？答案

【问题标题】：How to create HTML radio buttons above the Raphael canvas layer in my case?在我的情况下，如何在 Raphael 画布层上方创建 HTML 单选按钮？
【发布时间】：2011-10-25 16:47:58
【问题描述】：

我创建了一篇拉斐尔论文：

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

我想创建一些 HTML 单选按钮，它们在 纸画布层之上，这意味着在纸上绘制的任何东西都不会覆盖（隐藏）HTML 单选按钮，但在单选按钮后面。

我尝试过的如下图所示：

我的HTML页面：

...
<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>
...

上述页面的CSS：

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

使用上面的代码，单选按钮是有的，但是如果有一个Raphael对象在单选按钮的相同位置上绘制，那么按钮就会被Raphael对象隐藏，但是我想要的是有Raphael对象在单选按钮之后，即 HTML 单选按钮层在 Raphael 画布层之上。

如何获得此功能？

【问题讨论】：

标签： raphael javascript javascript-framework

【解决方案1】：

尝试更改每个 div 的 z-index 属性（my-canvas、my-radio-btn）？我的意思是这样的：

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

这对我有用，我有一个地图应用程序，其中一些 div 漂浮在 raphael 对象上。您还应该注意 div 的定位。我使用的是绝对定位。

【讨论】：