質問: GIFアニメーションをタグで再生したいのですが, ``` タイトルウェーブオプション ``` のようにするとcanvasの後ろに隠れてしまうように見えなくなります. ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/11d6cb5458a8fec81b70ceb4e84610e9.png) 要素を一番下にした場合見えるようになるので画像の取得には成功しているようです. ### 試したこと 背景表示に使っている を消してみる. ➡canvasの後ろにGIFが隠れてしまっているようでした. 背景表示に使っている のすぐ後に GUIのimgタグを入れる ➡背景画像の後ろに隠れてしまっているようでした. GIFのimgタグをの直前に入れる ➡この方法では表示されましたが他の方法で表示されない理由が理解できないので保留です. ### 解決したいこと 内にGIFアニメーションのimgタグを入れてもきちんと見えるように表示される方法. canvasタグ内に子要素を入れるときの注意点,などもお聞きしたいです. canvas要素内に子要素を入れるとimgの表示はされなくなるのでしょうか.... 助言よろしくお願いします.
回答: CSSを見てみないと現状がよく分からないのですが 背景はcssで入れた方がいいと思います ``` #mainview{ background: url('../img/battlescene/mapimgtest.jpg') ↑階層指定してください ``` 他だとz-indexで重なり順を指定など ``` #back { z-index: 10; } #maincanvas { z-index: 20; } .characterstand { z-index: 30; /* 値が大きいほど上に来ます */ } #stetasview { z-index: ○○; /* 指定してください */ ```