🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Q&A

解決済

2回答

17939閲覧

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

kotori_00

総合スコア46

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

0グッド

0クリップ

投稿2017/08/12 02:19

編集2017/08/12 02:21

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

html

1<div class="topslide-box-wrapper"> 2 <div class="topslide-frame"> 3 <img class="image" src="img/top_img1.jpg" alt="topslide-image"> 4 </div> 5</div>

css

1.topslide-box-wrapper { 2 display: flex; 3 width: 100%; 4 height: 389px; 5 margin-top: 44px; 6 background-image: url('../img/topslide_bg_img.gif'); 7 justify-content: center; 8 align-items: center; 9} 10.topslide-frame { 11 height: 368px; 12 width: 922px; 13 background-image: url('../img/topslide_frame.gif'); 14 z-index: 10; 15 position: relative; 16} 17.topslide-frame .img { 18 z-index: 0; 19 position: relative; 20}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/08/12 02:25

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

2017/08/12 02:31

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

2017/08/13 01:02

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

回答2

0

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

CSS

1.topslide-box-wrapper { 2 /*display: flex;*/ 3 width: 100%; 4 height: 389px; 5 margin-top: 44px; 6 background-image: url('https://placehold.jp/24/9999cc/333399/922x389.png'); 7 justify-content: center; 8 align-items: center; 9} 10.topslide-frame { 11 height: 368px; 12 width: 922px; 13 /* 14 background-image: url('https://placehold.jp/24/cc9999/993333/922x368.png?text=background-image'); 15 z-index: 10; 16 */ 17 position: relative; 18} 19.topslide-frame .image { 20 /* 21 z-index: 0; 22 position: relative; 23 */ 24} 25.topslide-frame::after { 26 content: ''; 27 height: 368px; 28 width: 922px; 29 background-image: url('https://placehold.jp/24/cc9999/993333/922x368.png?text=background-image'); 30 position: absolute; 31 top: 0; 32 left: 0; 33} 34```**動くサンプル:**[https://jsfiddle.net/v2t7zs17/](https://jsfiddle.net/v2t7zs17/)

投稿2017/08/12 02:52

kei344

総合スコア69596

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

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

css

1.topslide-frame { 2/* 3 z-index: 10; 4*/ 5 position: relative; 6} 7.topslide-frame .img { 8 z-index: -1; 9 position: relative; 10}

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

投稿2017/08/12 10:48

zohnam

総合スコア1443

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/08/12 11:08

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

2017/08/13 12:42

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問