質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

1回答

1591閲覧

負の値のz-indexについて

namahamn

総合スコア16

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/02/06 10:02

HTML

1<header class="showcase"> 2 <div class="container showcase-content"> 3 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> 4 </div> 5</header>

CSS

1*{ 2 padding: 0; 3 margin: 0; 4 box-sizing: border-box; 5} 6 7.showcase{ 8 position: absolute; 9 top:0; 10 left:0; 11 height: 100vh; 12 width: 100vw; 13 background: green; 14} 15 16.showcase-content{ 17 color: #fff; 18 height: 100%; 19 width: 100%; 20 display: flex; 21 flex-direction: column; 22 justify-content: center; 23 text-align: center; 24 position: relative; 25 z-index:1; 26} 27 28.showcase-content::before{ 29 content: ''; 30 position: absolute; 31 top: 0; 32 left: 0; 33 width: 100vw; 34 height: 100vh; 35 background: rgba(24, 39, 51 , 0.8); 36 z-index: 0; 37}

上記のz-indexで「showcase-content」の後ろに「before」要素を背景として配置するとき、

CSS

1.showcase-content{ 2 z-index:1; 3} 4 5.showcase-content::before{ 6 z-index: 0; 7}

このように指定しても「before」要素が背景として来ません。
しかし、

CSS

1.showcase-content{ 2 z-index:0; 3} 4 5.showcase-content::before{ 6 z-index: -1; 7}

このように、負の値を指定するとちゃんと背景に配置することができます。
重なりの順番としてはどちらも同じだと思うのですがなぜ負の値を指定する必要があるのでしょうか。

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

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

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

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

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

m.ts10806

2020/02/06 12:32

もっと別の数字は試してみたのでしょうか。
guest

回答1

0

::before等の疑似要素は指定されたセレクタの子要素として追加されます。
そしてz-indexは「兄弟要素」の重なりの順番を指定するものです。
従って、

css

1.showcase-content{ 2 z-index:0; 3}

上の指定はnamahamnさんがやりたい

「showcase-content」の後ろに「before」要素を背景として配置する

には関係ない指定だといえます。

なぜ負の値を指定する必要があるのでしょうか。

については、z-index0値をデフォルトの基準として扱うと説明すれば、理解できると思います。
詳しくはここを見てください

以下追記~~

z-indexを指定していない場合は以下の順序に (下から上に) 重ね合わせられます。

1.ルート要素の背景と境界
2.位置指定なしのブロックの子孫、 HTML 内での出現順
3.位置指定要素、 HTML 内での出現順

つまり、コメント欄のnamahamnさんが提示しているコードでは、.showcase-content::beforez-indexを外し、その兄弟要素のhタグにposition:relativeを指定することで、黒背景が前後ろに表示されます。

投稿2020/02/07 00:43

編集2020/02/21 05:09
makosankibu

総合スコア289

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

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

makosankibu

2020/02/07 00:47

また、デフォルトの要素の重なりは「htmlに下に記載する順」と言うことを踏まえればそもそも`before`ではなく`after`を使えばすぐ解決できます。
namahamn

2020/02/07 09:08

ご回答ありがとうございます。 z-indexは0を基準としているのですね。 また、 .showcase-content{ z-index:0; } の指定は関係ないとあるのですが、しかし、この指定を外すと黒の背景は「showcase」の後ろに隠れてしまうと思います。なので、0以上の数を指定する必要があるのではないでしょうか?
makosankibu

2020/02/10 00:51

> この指定を外すと黒の背景は「showcase」の後ろに隠れてしまうと思います。 試してみましたか?そんなことないはずです。 黒の要素はshowcaseの孫要素です。
makosankibu

2020/02/12 00:22

上リンクにある通り、z-indexを指定している場合と指定していない場合は重ね合わせが変わってきます。 これは説明不足でした。詳しくは上記リンク先を見てみてください。
kyoya0819

2020/02/13 23:29

「回答を求めています」を出すのは良いですが、どこがわからないのでしょうか?
miyabi_takatsuk

2020/02/18 00:52

makosankibuさん > > z-indexを指定している場合と指定していない場合は重ね合わせが変わってきます。 の件、回答に追記されるといいかもですね。 (質問者さんがドキュメント見てくれればいい話ではありますが) おそらく質問者さん、親要素にz-indexの指定がない場合、 その先祖要素のさらに下に行っていることに気付いてないのでしょう。
makosankibu

2020/02/21 05:10

miyabi_takatsukさん 返信遅くなりすみません。回答に追記しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問