Как создать переключатели HTML над слоем холста Raphael в моем случае? - PullRequest
Новая
       12

Как создать переключатели HTML над слоем холста Raphael в моем случае?

0 голосов
/ 12 августа 2011

Я создал бумагу Рафаэля : 

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 поверх слоя холста Рафаэля.

Как получить эту функцию?

1 Ответ

0 голосов
/ 13 сентября 2011

Попробуйте изменить свойство z-index каждого элемента div (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.Вы также должны быть осторожны с позицией ваших дивов.Я использую абсолютное позиционирование.

...