2012-03-19 2 views
0

내 코드입니다 겹치는 :캔버스는 여기 내 버튼

<canvas id ="compound_area" style= "position: absolute; border: 2px hidden; top:70px; left: 10px; background-color : #FFFF99" width = "1230" height= "580"></canvas> 

<canvas id ="drawing_plate" style= "position: absolute; border: 2px hidden; top:93px; left: 230px; background-color : #FFFFFF" width = "1000" height= "550"> 

<button id= "pencil" style= "position: absolute; top: 76px; left: 17px"> PENCIL </button> 

나는 하나의 캔버스가 부분적으로 다른 하나를 겹쳐 볼 수 있습니다. 그리고 그것이 내가 필요한 것입니다. 하지만 노란색 캔버스 (배경) 위에 단추를 추가해야합니다. 나는 그 방법을 찾을 수 없다. 내가 상대를 사용하더라도 :

<div style="position: relative;"> 
<canvas id ="compound_area" style= "position: absolute; z-index= 0; border: 2px hidden; margin-top:70px; margin-left: 10px; margin-right : 10px; margin-bottom : 10px; background-color : #FFFF99 " width = "1230" height = "580"></canvas> 

<canvas id ="drawing_plate" style= "position: absolute; z-index= 1; border: 2px hidden; margin-top:93px; margin-left: 230px; margin-bottom : 20px; background-color : #FFFFFF" width = "1000" height= "550"></canvas> 

<button id= "pencil" style= "position: absolute; z-index= 2; top: 76px; left: 17px"> PENCIL </button> 
</div> 

을 버튼은 캔버스 뒤에 항상이다. 저는 새로운 초보자이며 많은 방법을 시도하지만 헛된 것입니다. 제발 누군가 도와주세요. 감사합니다.

+2

당신이 원하는에 정말 따라 다릅니다. 오늘 너무 피곤할 수도 있겠지만, 내가 무슨 소린지 모르겠다. –

+0

버튼은 노란색 캔버스 위에있을 수 없으며 노란색 캔버스 만 겹칩니다. 알았어? – Stallman

+2

'z-index = 2;'대신'z-index : 2;'를 사용해 보셨습니까? – Zeta

답변

1

은 그러나 [...] 나는 (배경)

그래서 왜 top: 76px에있는 버튼을 배치하고, top: 70px의 캔버스 노란색 캔버스 위의 버튼을 추가 할 필요가? 캔버스 아래에 버튼을 명시 적으로 배치하고 있습니다. 이런 일에

변경하면 버튼 코드 :

<button id= "pencil" style= "position: absolute; top: 50px; left: 17px"> PENCIL </button> 
+1

OP가 z 기반 ('z-index') 또는 y- 기반 위치 지정 ('top') 측면에서 버튼을 원할지 여부는 명확하지 않습니다. (CSS 구문은'property : value'가 아닌'property : value'입니다) . I * guess * 그는 목적에 따라 'top : 76px'규칙을 사용했으며 레이어 기반 도움말이 필요합니다. 그는 정말로이 문제를 분명히해야합니다 : /. – Zeta

관련 문제