캔버스를 이미지 위에 놓을 수 없습니다.

Question

로드 된 이미지 위에 물건을 그려보고 있습니다. 그러나 어떤 이유에서 캔버스가 위에 있지 않은 이미지 아래에 나타납니다. 다음과 같이 내가 그 일을 해요 :

나는 다음과 같은 용기가 :

이

window.onload = function() { 
    var img = document.getElementById('target'); 
    var width = img.naturalWidth; 
    var height = img.naturalHeight; 

    var canvas = document.createElement('canvas'); //Create a canvas element 
    //Set canvas width/height 
    canvas.style.width=width; 
    canvas.id = 'mycanvas'; 
    canvas.style.height=height; 
    //Set canvas drawing area width/height 
    canvas.width = width; 
    canvas.height = height; 
    //Position canvas 
    canvas.style.position='absolute'; 
    canvas.style.left=0; 
    canvas.style.top=0; 
    canvas.style.zIndex=100000; 
    canvas.style.pointerEvents='none'; //Make sure you can click 'through' the canvas 
    $('#container').append(canvas); 
} 

그러나, 캔버스가 아래에 나타납니다 :

<div id="container"> 
    <img src="{{url_for('static', filename='nature.jpg')}}" id="target" style="zIndex=1"> 
</div>> 

와 나는 다음과 같이 캔버스를 추가 할 노력하고있어 이미지가 아니라 위에 있습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

감사

Answer 1

당신이 있기 때문에, 그 요소는이 경우 static

이외의 위치를 ​​필요로 일을 z-index을 위해, 그것은 여전히 ​​style="z-index: 1",해야 인라인 스타일 style="zIndex=1"에 대한 잘못된 구문을 사용했습니다 img에는 위치가 없으므로 캔버스의 위치가 position: absolute이므로 실제로는 z-index을 모두 삭제할 수 있습니다. 그 이유만으로 이미지 위에 레이어가 적용됩니다. canvas를 들어

즉 position: relative