ＣＳＳ内で読み込んだ画像をページの最前面に持っていきたい。

Question

実現したいこと

cssファイルの.suprise-img{}内で記述したimg/koroatu.jpgを呼び出し、そのjpg画像をさらにＣＳＳなどで最前面に移動するように命令したい。

前提

html内にボタンをinputしidをbutton2として指定し、そのボタンがクリックされるとjavascript内のjQuery記述で書かれたコードによって、そのidにaddClassメソッドがsuprise-imgのクラスを追加し、その追加されたクラスの装飾をcssのsuprise-img{}で行っている。そのsuprise-img{}にはimg/koroatu.jpgという相対パスの画像ファイルがあり、その画像は先ほどのボタンをクリックすれば表示される。ここまでは動作の確認が出来たが。この画像を最前面に表示する方法が分からない。

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

エラーメッセージは確認できない。

該当のソースコード

.suprise-img{
  background-image:url(img/koroatu.jpg);           
  background-repeat:  no-repeat;               
}

img[src="img/koroatu.jpg"] {
  width:max-width;                                  
  height:max-content;                                 
  z-index: 12;
}

試したこと

・ＣＳＳファイル内の.suprise-img{}やimg[src="img/koroatu.jpg"] {}にz-indexによって最前面にする事を試みたがいずれも失敗。

補足情報（FW/ツールのバージョンなど）

下記には、これらの機能を実装しているwebページに関する情報（githubのリポジトリ）を載せます。
https://github.com/zero-penguin/polka2

Answer 1

そもそもbodyは最背面なので、
背景画像として表示してしまうと、前面に出すことはできなくなります。

#main-message同様に、
body内の要素として該当画像を追加すれば解決します。