Htmlキャンバスは一部のブラウザでは要素の上に描画されますが、他のブラウザでは描画されません。

Question

私の現在のウェブサイトで問題がありますが、HTMLキャンバスを使って簡単なアニメーションを追加しようとしています。このキャンバスの上に他の画像を配置しました。それはいくつかのブラウザでうまく動作しますが、SafariとChromeではキャンバスが写真の上に描かれていますが、その上に描かれたくないのですが、私はその理由をよく分かりません。私は情報を検索してZ-インデックスを使いこなそうとしましたが、なぜ2つのブラウザで描画順序が異なるか、それを修正する方法がわかりません。誰も似たような問題を経験しましたか？

Answer 1

position: relativeをIMG要素に追加し、それらが文書のCanvas要素の後に置かれていることを確認してください。

img { 
    position: relative; 
}