필자의 경우 Raphael 캔버스 레이어 위에 HTML 라디오 버튼을 만드는 방법은 무엇입니까?

Question

나는 라파엘 종이 만들었습니다

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

, 라디오 버튼이 있지만, 라디오 버튼의 동일한 위치에 그림이있는 라파엘이 있다면 ns, 버튼은 Raphael 객체에 의해 숨겨져 있지만, 원하는 것은 Raphael 객체를 갖는 것입니다. 뒤에는 라디오 버튼이 있습니다.이 라디오 버튼 레이어는 상단에 Ra30el 캔버스 레이어입니다.

이 기능을 얻으려면 어떻게해야합니까?

Answer 1

각 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가있는지도 애플리케이션을 가지고있다. 당신은 divs의 위치에 조심해야합니다. 절대 위치 지정을 사용하고 있습니다.