Question

I have a problem in my current website, I am trying to add a simple animation using HTML canvas. I have positioned other images on top of this canvas. It works fine in several browsers, but in Safari and Chrome the canvas is being drawn on top of the pictures that I don’t want it to be drawn on top of, and I’m not sure why. I have tried searching for information and messing with the z-index, but I don’t know why the draw order is different in those two browsers or how to fix it. Has anyone experienced a similar problem?

Answer 1

Try to add position: relative to the IMG elements and make sure they are placed after the Canvas element in the document.

img { 
  position: relative; 
}