HTMLでGIFアニメーションを表示したいです

GIFアニメーションを<img>タグで再生したいのですが,

HTML
1 <div id="mainview">
2    <img id ="back" src="img/battlescene/mapimgtest.jpg">
3
4    <canvas id="maincanvas">
5    </canvas>
6    <img class="characterstand" id="member1" src="img/Idle0.gif">
7
8    <div id="stetasview">
9              <ul>タイトル</ul><ul>ウェーブ</ul><ul>オプション</ul>
10    </div>
11  </div>

のようにするとcanvasの後ろに隠れてしまうように見えなくなります.

要素を一番下にした場合見えるようになるので画像の取得には成功しているようです.
###試したこと
背景表示に使っている <img id ="back" src="img/battlescene/mapimgtest.jpg">を消してみる.
➡canvasの後ろにGIFが隠れてしまっているようでした.
背景表示に使っている <img id ="back" src="img/battlescene/mapimgtest.jpg">のすぐ後に
GUIのimgタグを入れる
➡背景画像の後ろに隠れてしまっているようでした.
GIFのimgタグを</body>の直前に入れる
➡この方法では表示されましたが他の方法で表示されない理由が理解できないので保留です.

解決したいこと

　<div id="mainview">内にGIFアニメーションのimgタグを入れてもきちんと見えるように表示される方法.
canvasタグ内に子要素を入れるときの注意点,などもお聞きしたいです.

canvas要素内に子要素を入れるとimgの表示はされなくなるのでしょうか….
助言よろしくお願いします.

行動規範の内容に同意します

回答1件

ベストアンサー

CSSを見てみないと現状がよく分からないのですが

背景はcssで入れた方がいいと思います

css
1#mainview{
2 background: url('../img/battlescene/mapimgtest.jpg') 
3                  ↑階層指定してください

他だとz-indexで重なり順を指定など

css
1#back {
2	z-index: 10;
3}
4
5#maincanvas {
6	z-index: 20;
7}
8	
9.characterstand {
10	z-index: 30;	/* 値が大きいほど上に来ます */
11}
12
13#stetasview {
14    z-index: ○○;　　/* 指定してください */