画像の上にキャンバスを配置できません

Question

私は、読み込まれた画像の上にいくつかのものを描画しようとしています。しかし、なんらかの理由でキャンバスが上にない画像の下に表示されます。次のように私はそれをやっている：

を私は次のコンテナいる：

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

そして、私は次のようにキャンバスを追加しようとしています：

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

しかし、キャンバスが下に表示されますイメージの上にではなくむしろイメージ。私は間違って何をしていますか？

あなたはインラインスタイルstyle="zIndex=1"の間違った構文を使用していたおかげで

Answer 1

z-indexは、その要素を動作させるために、それは、まだ、style="z-index: 1"なければならないので、この場合はstatic

以外の位置を必要としますimgには位置がありません。キャンバスの位置はposition: absoluteなので、実際にはz-indexを一緒にドロップすることができ、それだけでイメージの上にレイヤーが作成されます。 containerに対して配置するcanvasについては

、containerはすなわちposition: relative