z-indexが効かないケース

以下のようなケース（全体のbackgroundをgreenにしたい）なのですが、cssでpositionを設定しつつ、z-indexを設定しても.wrapperのグリーンが前に出てくれません。できればheaderはabsoluteのままが良いのですが、これが効かない理由と解決方法について、アドバイスを頂きたく投稿させていただきました。

よろしくお願い申し上げます。

JSFIDDLE

html
1<body>
2 <div class="wrapper">
3   <div class="header"></div>
4  </div>
5</body>

css
1.wrapper{
2  width:500px;
3  height:500px;
4  background:green;
5  position:relative;
6  z-index:2;
7}
8
9.header{
10  width:100%;
11  height:100px;
12  background:red;
13  position:absolute;
14  z-index:1;
15}

m.ts10806

2019/08/27 02:31 編集

この先どうしたいのか追記願います。（.headerの内容が何もないですし）これだけでは意図は伝わりづらいと思います。

行動規範の内容に同意します

回答3件

ベストアンサー

これが効かない理由と解決方法について

z-indexの理解が間違っています。以下のコードで確認してみてください。

CSS
1.wrapper{
2  width:500px;
3  height:500px;
4  background:green;
5  position:relative;
6  z-index:auto;  /* ←「auto」または「削除」 */
7}
8
9.header{
10  width:100%;
11  height:100px;
12  background:red;
13  position:absolute;
14  z-index:-1;  /* ←「負の整数」に変える */
15}

「Meeets」さんの回答にもあるように「スタッキングコンテキスト」が原因です。

簡単に言えば、親に番号を振ると、「親グループ」が形成され、「asuchi0819」さんの回答のように、同じ階層でないとz-indexが効かなくなります。
「z-index:0;」を設定しても同じことです。

なので、「z-index:auto;」を記述するか、プロパティ自体を削除（標準でauto）するかのどちらかになります。

「誤字」「脱字」があったので修正しました。
(^^;)

投稿2019/08/27 22:57

編集2019/08/27 23:00

yoshinavi

総合スコア3523

pegy

2019/08/27 23:32

コメントありがとうございます。なるほど、要素に親子関係があった場合には、z-indexを指定した場合でも、親子関係のレイヤーが優先されるような挙動を見せるのですね。これまで効かないな〜というケースのほとんどがこの仕様によるものであったと思われます。大変勉強になりました。 "親に「 position:static;」を設定すると、この基準がなくなってbodyに移行してしまいますので、この場合の親は、「position:relative;」のまま、「z-index: auto; または削除」し、子に「z-index: -1;」を設定するのが良いかと思います" については、positionとの関係でまだ理解ができないため、ちょっと必死に考えてみます

yoshinavi

2019/08/27 23:57

＞親に「 position:static;」を設定すると･･･ →　提示のコードだと、「.header」から見ると、直近の「position:relative;」の要素が基準になります。一般的には「親要素」が多いですが、今回の場合、親「wrapper」から「position:relative;」がなくなると、bodyに基準が移行します。そうすると「.header」に設定された「width:100%;」はbodyを基準に取りますので、画面幅いっぱいに広がる形になります。これを防ぐために、親「wrapper」に「position:relative;」のままで基準を残すことで、親と同じ幅を保てます。

行動規範の内容に同意します

.header（子要素）の上に.wrapper（親要素）という重ね順にしたいということでしょうか？
子要素の上に親要素というケースは多くないと思いますが、
どういった用途なのでしょうか・⚪︎・？

.header（子要素）の上に.wrapper（親要素）の重ね順にするには..
以下のように修正すると、上手くいくと思います＾＾
①.wrapperのposirionをstaticに変更
②.headerのz-indexを負の値に変更

css
1.wrapper{
2  width:500px;
3  height:500px;
4  background:green;
5  position:static;
6  z-index:2;
7}
8
9.header{
10  width:100%;
11  height:100px;
12  background:red;
13  position:absolute;
14  z-index:-1;
15}

理由については、「スタッキングコンテキスト」というweb仕様が原因です。
https://www.w3.org/TR/CSS2/visuren.html#x43

投稿2019/08/26 16:09

Meeets

総合スコア48

SugiuraY

2019/08/26 20:50 編集

コメントの修正をしました

pegy

2019/08/26 20:51

コメント有難うございます。特定の操作を条件に、コメントボックスを表示して、表示中はすべての背景をグレーアウトするためにらすべての要素(headerを含む)をカバーするレイヤー(ここではwrapper)を表示させようと思っています。つまり、コメントボックス表示中はコメントボックス>グレーアウトするためのwrapper>headerを含めた他のすべての要素というレイヤーを一時的に実現しようと考えています。ご教示頂いた方法で、実装はできそうですが、もし、手法や考え方自体が不適切であればまた、ご指摘頂けると幸いです。宜しくお願い申し上げます。

Meeets

2019/08/27 11:28

こんなイメージでしょうか？ https://tech-dig.jp/demo/pop-up-2/ モーダルといって、色々なwebサイトで使われている技術です。『特定の操作をした時に、モーダルを表示させる。』上記URLでいくとボタンをクリックしたら…… レイヤーが、モーダル中身〈モーダル背景〈その他　の順になります。

yoshinavi

2019/08/27 22:41

提示のHTMLで行うには、親に「 position:static;」を設定すると、この基準がなくなってbodyに移行してしまいますので、この場合の親は、「position:relative;」のまま、「z-index: auto; または削除」し、子に「z-index: -1;」を設定するのが良いかと思います。

行動規範の内容に同意します

一般的（自分だけだったらすみません）だったら以下のコードになります。

HTML
1<body>
2  <div class="wrapper"></div>
3  <div class="header"></div>
4</body>

CSS
1* {
2  margin: 0;
3  padding: 0
4}
5.wrapper{
6  width:500px;
7  height:500px;
8  background:green;
9  position:relative;
10  z-index:2
11}
12
13.header{
14  width:100%;
15  height:100px;
16  background:red;
17  position:absolute;
18  top:0;
19  z-index:1
20}