HTML画布被绘制在某些浏览器元素的上面，而不是其他

Question

我在我目前的网站出了问题，我尝试添加使用HTML画布一个简单的动画。我在这个画布上放置了其他图像。它在多种浏览器中都能正常工作，但在Safari和Chrome中，画布被绘制在我不希望绘制的图片的顶部，而我不知道为什么。我试图搜索信息并搞乱z-index，但我不知道为什么这两个浏览器中的绘图顺序不同，或者如何解决这个问题。有没有人遇到类似的问题？

Answer 1

尝试添加position: relative到IMG元素，并确保它们在文档中的Canvas元素之后。

img { 
    position: relative; 
}