WordPressサイトでウェジットの画像を最前面に表示したい

Question

###前提・実現したいこと
WordPressは、自作テーマとなります。

はじめまして、WordPressでサイトを構築している者です。
今回、ウェジット機能を利用して表示している画像を、背景画像より最前面に表示したいと考えています。

###発生している問題・エラーメッセージ

WordPressのウェジット機能を利用して、サイドバーに画像を表示させた（下記コード1）のですが、
テーマファイルのfooter.phpに書き込んで表示させている背景画像（下記コード2）と被ってしまい、
ウェジット機能を利用して表示させた画像がfooter.phpで表示させている背景画像の下に隠れる形で表示されてしまいます。
これを改善したいと考えています。

###該当のソースコード
下記- コード1
（ウェジットの「テキスト」に記載）

<img width="170px" src="https://example.jp/wp-content/uploads/2017/03/abcde.png">

下記-コード2
（footer.php記載）

<div class="bg-img"></div>

.bg-img {
  background: url(~~~~~~/bg-img.png) no-repeat;
  background-size: 100% auto;
  margin: -120px auto -21px;
  position: relative;
  width: 100%;
  max-width: 1084px;
  height: 294px;
  position: relative;
  z-index: 80;
}

###試したこと
z-indexを弄れば最前面に表示させることができると考えたので、コード1にz-indexなどを加えて書いてみたのですが
WordPressのせいなのかは分かりませんが、うまく最前面に表示されませんでした。

もし可能であれば、正しいコードを書いて、教えていただきたいです。
他にご不明点などありましたら、お知らせ願います。

Comments

[kei344]

使用されているテーマは自作テーマでしょうか？それとも公開されているテーマでしょうか？後者の場合は入手先をリンクつきで質問文に追記してください。

[teckservice]

申し訳ございません。完全自作テーマとなります。

[kei344]

今気づいたのですが、例示用ドメインはご自身で所有されていない限り example.com, example.jp, example.co.jp など例示用に予約されたドメイン名を利用してください。 http://www.atmarkit.co.jp/fwin2k/win2ktips/801exampledom/exampledom.html

[teckservice]

ご指摘ありがとうございます。今後からはexampleという文字列を使用させていただきます。

Answer 1

img {
    margin-bottom: 120px;
}
```or
```CSS
img {
    position: relative;
    z-index: 81;
}
```**動くサンプル：**[https://jsfiddle.net/ho51moau/](https://jsfiddle.net/ho51moau/)