无法将画布放置在图像上

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

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

谢谢

Answer 1

您对内联样式 style="zIndex=1" 使用了错误的语法，它应该是 style="z-index: 1"，但要使 z-index 工作其元素需要在 static 以外的位置

在这种情况下，由于img 没有位置，您实际上可以将z-index 全部放在一起，因为画布有一个位置position: absolute，因此将分层在图像的顶部一个人。

对于要相对于container 定位的canvas，container 需要一个位置，即position: relative