負の値のz-indexについて

Question

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

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.showcase{
    position: absolute;
    top:0;
    left:0;
    height: 100vh;
    width: 100vw;
    background: green;
}

.showcase-content{
    color: #fff;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index:1;
}

.showcase-content::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(24, 39, 51 , 0.8);
    z-index: 0;
}

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

.showcase-content{
    z-index:1;
}

.showcase-content::before{
    z-index: 0;
}

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

.showcase-content{
    z-index:0;
}

.showcase-content::before{
    z-index: -1;
}

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

Comments

[m.ts10806]

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

Answer 1

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

.showcase-content{
    z-index:0;
}

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

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

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

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

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

以下追記～～

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

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

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

Comments

[makosankibu]

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

[namahamn]

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

[makosankibu]

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

黒の要素はshowcaseの孫要素です。

[makosankibu]

MDNは閲覧しましたか?また、下記サイトが参考になるかもしれません。
https://teratail.com/questions/170978

[namahamn]

https://codepen.io/gtrtretyrey/pen/NWqqMXy
上記のようになり、黒背景が現れません。

[makosankibu]

MDNは閲覧しましたか?また、リンク先の下記は閲覧しましたか
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index

[makosankibu]

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

[kyoya0819]

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

[miyabi_pudding]

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

[makosankibu]

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