在我的例子中，如何在 Raphael 画布层上方创建 HTML 单选按钮？

发布于 2024-11-29 06:28:05 字数 1083 浏览 6 评论 0原文

我创建了一个Raphael论文：

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 单选按钮层是 <强>在上面拉斐尔画布层。

如何获得这个功能呢？

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雨后咖啡店 2024-12-06 06:28:05

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

#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 的位置。我正在使用绝对定位。

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.

回复收藏 0 原文

~没有更多了~