html 5에서 div 요소를 캔버스 요소 위에 배치하는 방법은 무엇입니까?

Question

누구든지 도와 드릴까요? html로 캔버스 요소 (500px x 500px)의 상단 (앞면)에 div (말하면 10 픽셀 x 10 픽셀) 요소를 넣으려고합니다. 각 Z- 색인을 변경하려고했지만 아무 소용이 없습니다. 아무도 아이디어가 없습니까? 아니면 실제로 할 수없는 것들 중 하나입니까? 저는 이미 절대 위치 지정과 모든 것을 수행하는 방법을 알고 있습니다. div 요소는 캔버스 요소 뒤에 배경으로 배치되어 있습니다. 앞면에 캔버스 요소를 가져 오는 방법이 필요합니다.

감사합니다. 당신의 요소는 위치에 따라 달라집니다

Answer 1

XHTML

<div id="canvas"> 
    <div id="topelement"> 
    </div> 
</div> 

CSS는 스타일링

#canvas { height: 500px; width: 500px; overflow: hidden; } 
#topelement { height: 10px; width: 10px; float: left; } 

Answer 2

.

z- 색인을 사용하려면 상대적인 위치 또는 절대 위치로 위치를 설정해야합니다.

Answer 3

동일한 문제가없는 것 같습니다. JSbin에서 여기에서 이야기하는 것처럼 샘플 캔버스/div를 만들었습니다. http://jsbin.com/adowo/edit

그게 뭡니까? 또는 나는 무엇인가 놓치고 있냐?

Answer 4

절대 위치 지정 방식은 일반적으로 코드의 앞부분에있는 요소가 코드의 뒷부분에있는 요소 뒤에 있음을 의미합니다. 그것을 바꾸려면 실제로 z- 인덱스를 사용하십시오. 그러나 Z- 색인은 위치 된 요소에서만 작동합니다.

또 다른 문제는 모두 요소가 Z- 색인 "컨테이너"처럼 작동한다는 것입니다. 따라서 <div>이 문서와 다른 위치에있는 컨테이너에서 더 일찍 발생하면 해당 조상의 z- 인덱스 계층에 바인딩 될 수 있으므로 <canvas> 상단에 이스케이프 및 표시 할 수 없습니다. 이 경우 <div>이 좋은 위치에 있도록 CSS를 약간 다시 작성하거나 페이지를 다시 정렬해야합니다.

Answer 5

때로는 이것이 내 경험에서 발생할 수 있습니다. html5 캔버스 API에서 어떤 일이 일어나고 있는지 알 수 없습니다. div 요소 아래에 그림을 그려야하는 경우 대신 img 태그를 사용하십시오.

은 ---이 샘플 코드는 prototype.js에 (1.6) ---로 기록

< -javascript 코드 코드>

var canvas = $('canvas'); 
canvas.width = 200; 
canvas.height = 200; 
var ctx = canvas.getContext('2d'); 
ctx.beginPath(); 
ctx.arc(100, 100, 100, 0, - 360 * Math.PI/180, true); 
ctx.fillStyle = 'rgba(204, 204, 255, 1)'; 
ctx.strokeStyle = 'rgba(0, 51, 153, 1)'; 
ctx.fill(); 
ctx.stroke(); 
var imgStr = canvas.toDataURL(); 
var element = new Element('img', {'src' : imgStr); 
var target = $('layer1'); 
target.insert(element); 

< - HTML ->

<div id='layer2' style='z-index : 50;'>&nbsp;</div> 
<canvas id='canvas' style='z-index : 30;'></canvas> 
<div id='layer1' style='z-index : 10;'></div> 

한편, 홈페이지는 일본어로 쓰여져 있습니다.

Answer 6

잠깐 동안이 작업을 끝내고 배경에서 원하는 것의 z- 인덱스를 -1로 설정 한 후 작업을 마쳤습니다.