z-indexをposition：relativeに指定しても効かない

Question

#解決したいこと
画像にフレーム画像を重ねて表示したいのですが、z-index指定しても指定通りにいきません。
コードの記述順のまま表示されます。
position:relativeやabsoluteを指定してみたのですが、それでもうまくいきませんでした。
どうしたら画像フレームを画像に重ねて表示することができるでしょう。
階層構造はこのままで重なりを指定したいです。

<div class="topslide-box-wrapper">
  <div class="topslide-frame">
    <img class="image" src="img/top_img1.jpg" alt="topslide-image">
  </div>
</div>

.topslide-box-wrapper {
  display: flex;
  width: 100%;
  height: 389px;
  margin-top: 44px;
  background-image: url('../img/topslide_bg_img.gif');
  justify-content: center;
  align-items: center;
}
.topslide-frame {
  height: 368px;
  width: 922px;
  background-image: url('../img/topslide_frame.gif');
  z-index: 10;
  position: relative;
}
.topslide-frame .img {
  z-index: 0;
  position: relative;
}

Comments

[kei344]

「top_img1.jpg」を背景に置きたいという事でしょうか。また、「top_img1.jpg」サイズはどうなっていますか？

[kotori_00]

top_img1.jpgを.topslide-frameの背景画像の背景に置きたいです。top_img1.jpgの画像サイズは922×368です。

[yoshinavi]

どのような症状でしょうか？どちらが現状は表示されてるのでしょうか？

Answer 1

かぶせるだけなら::after擬似要素で処理すればよいのでは。

.topslide-box-wrapper {
  /*display: flex;*/
  width: 100%;
  height: 389px;
  margin-top: 44px;
  background-image: url('https://placehold.jp/24/9999cc/333399/922x389.png');
  justify-content: center;
  align-items: center;
}
.topslide-frame {
  height: 368px;
  width: 922px;
  /*
  background-image: url('https://placehold.jp/24/cc9999/993333/922x368.png?text=background-image');
  z-index: 10;
  */
  position: relative;
}
.topslide-frame .image {
  /*
  z-index: 0;
  position: relative;
  */
}
.topslide-frame::after {
  content: '';
  height: 368px;
  width: 922px;
  background-image: url('https://placehold.jp/24/cc9999/993333/922x368.png?text=background-image');
  position: absolute;
  top: 0;
  left: 0;
}
```**動くサンプル：**[https://jsfiddle.net/v2t7zs17/](https://jsfiddle.net/v2t7zs17/)

Answer 2

第1回 z-indexの仕組み
https://app.codegrid.net/entry/z-index-1

z-index指定のスタック文脈について解説してあります。
文章はリンク先で読んでいただくとして、その解説を元に今回の件を解決するためには、こうすればいいということになります。

.topslide-frame {
/*
  z-index: 10;
*/
  position: relative;
}
.topslide-frame .img {
  z-index: -1;
  position: relative;
}

親要素である.topslide-frameでは、z-indexを指定しないというのがキモのようです。

Comments

[kei344]

多分、画像が.topslide-box-wrapperの後ろに入ってしまうので、下記記述が要ると思います。
.topslide-box-wrapper {
z-index: 0;
position: relative;
}
https://jsfiddle.net/v2t7zs17/1/

[kotori_00]

回答ありがとうございます。
これで解決できました。
position: relative;を指定すれば良いとばかり思っていました。
よくサイトを見て勉強しようと思います。