在某些浏览器中，Html画布绘制在元素之上，但在其他浏览器中不绘制

我有一个问题，在我目前的网站，我试图添加一个简单的动画使用HTML画布。我在画布上放置了其他图像。它在几种浏览器中都可以正常工作，但在Safari和Chrome中，画布是在图片的顶部绘制的，我不想在上面绘制，我不知道为什么。我曾尝试过搜索信息和处理z索引，但我不知道为什么这两种浏览器的绘制顺序不同，也不知道如何修复它。是否有人遇到过类似问题？

尝试将

位置：relative

添加到IMG元素中，并确保它们放在文档中的Canvas元素之后

img { 
  position: relative; 
}

---

一个例子或一些代码会很好。