Javascript can'；t将画布放置在图像上

我想画一些东西在加载的图像上。但是，由于某些原因，画布显示在图像下方而不是顶部。我的做法如下：

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

但是，画布显示在图像下方而不是上方。我做错了什么

---

感谢您对内联样式

style=“zIndex=1”

使用了错误的语法，它应该是

style=“z-index:1”

，但是，要使

z-index

工作，它的元素需要一个非

静态的位置

在这种情况下，由于
img
没有位置，您实际上可以将
z-index
放在一起，因为画布有一个位置，
position:absolute
，并且仅因为这个位置，它就被放在图像的顶部

对于相对于
容器定位的
画布
，
容器
需要一个位置，即
位置：相对
您可以共享JSFIDLE吗？请参见此处：