Html 일부 브라우저에서는 캔버스가 요소 위에 그려지지만

Question

현재 웹 사이트에 문제가 있습니다. HTML 캔버스를 사용하여 간단한 애니메이션을 추가하려고합니다. 이 캔버스 위에 다른 이미지를 배치했습니다. 여러 브라우저에서 정상적으로 작동하지만 사파리와 크롬에서는 캔버스가 그 위에 그려지기를 원하지 않는 그림 위에 캔버스가 그려져 있으며 이유는 확실하지 않습니다. 나는 정보를 찾고 Z- 색인을 망쳐 봤지만 두 브라우저에서 그리기 순서가 다른 이유나 그것을 고치는 방법을 알지 못합니다. 비슷한 문제를 경험 한 사람이 있습니까?

Answer 1

position: relative을 IMG 요소에 추가하고 문서의 Canvas 요소 뒤에 배치해야합니다.

img { 
    position: relative; 
}