ボタンをクリックした時に、画面いっぱいにグレーのdivを透かして表示させた時、それ以降ボタンが押せなくなる。

実現したいこと

ボタンをクリックした時に、画面いっぱいにグレーのdivを透かして表示させ、もう一度そのボタンを押すとそのdivが消える（背景色がなくなり、z-indexを-1にする）、というのを実現したいです。

前提

以下のコードで、bgというクラスのdiv（デフォルトでは透明）、header、main、footer４つがbody下の兄弟としており、headerの中のボタンを押すとbgのdivに灰色の色が付き、画面いっぱいに広がり、再びボタンを押すともとに戻る、という動作を実現したく思っています。

発生している問題・エラーメッセージ

ボタンがheaderの中にあるため、出てきたbgの下にまわりこむので押せなくなってしまいます。このボタンだけを、クリックできるようにするにはどうしたら良いでしょうか。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="style.css">
8    <title>Document</title>
9</head>
10<body>
11    <div class="bg"></div>
12    <header class="container header">
13        <button class="btn" onclick="document.querySelector('.bg').classList.toggle('bg_show')">ボタン</button>
14        <div><a href="#">ヘッダー</a></div>
15    </header>
16    <main class="container main">
17        <div><a href="#">メイン</a></div>
18    </main>
19    <footer class="container footer">
20        <div><a href="#">フッター</a></div>
21    </footer>
22</body>
23</html>

css
1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7.bg {
8  position: fixed;
9  top: 0;
10  left: 0;
11  width: 100vw;
12  height: 100vh;
13  z-index: -1;
14}
15.bg.bg_show {
16  background-color: rgb(51, 51, 51);
17  opacity: 0.5;
18  z-index: 2;
19}
20
21.container {
22  width: 80vw;
23  margin: 0 auto;
24}
25.container.header {
26  background-color: antiquewhite;
27  height: 100px;
28  display: flex;
29  justify-content: space-between;
30  flex-direction: row-reverse;
31}
32.container.header .btn {
33  background-color: white;
34  border: 1px solid black;
35  width: 60px;
36  height: 30px;
37  cursor: pointer;
38}
39.container.main {
40  background-color: aquamarine;
41  height: 300px;
42}
43.container.footer {
44  background-color: blueviolet;
45  height: 100px;
46}/*# sourceMappingURL=style.css.map */

試したこと

①headerにだけ、position relativeとz-index3を付与してみましたが、headerだけが浮き出てきておかしくなってしまいました。
②一応解決したのが、ボタン自体をbodyの子要素として他のheaderやmainと並べることです。そうした上でz-indexを大きな値にしてやるとちゃんと浮き出ました。しかし、ボタンはあくまでヘッダーの一部として扱いたい、という場合にはどうするのかと思い、質問させていただきました。これが唯一の方法なら、それでも構いません。よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

ボタンに z-index を設定したらうまくいきました。(Chromeで動作確認)

css
1.container.header .btn {
2  z-index: 2;
3}

投稿2023/06/03 00:07

hatena19

総合スコア34352

Okt

2023/06/03 03:42

回答ありがとうございます。こんなにシンプルに解決するとは、、質問が二つあるのですが、 1. ボタンにpositionを何も設定していないのになぜz-indexが効くのですか？ 2. 今回の場合だと、z-indexを付与しているのが、bodyの子であるbgと、bodyの子headerの子であるボタン。つまりbgとボタンは兄弟関係ではありません（同一のスタックコンテキストに存在しない）が、z indexの数値の大小でちゃんと重なりが反映されているのはなぜですか？色々と質問をしてすみません。どうぞよろしくお願いします🙇‍♀️

hatena19

2023/06/03 04:47

実は、サンプルを作成して、いろいろ試していたのですが、回答の設定だけでできしまったので、自分でもちょっと驚きました。私も同じ疑問を持っていまして、ちゃんとした回答を持ち合わせていません。なんとなくですが、fixed を設定すると通常のフローから外れるというのが関係してくるのだと思いますが、それがどう影響するのか理解はできてません。識者の解説を待ちたいところです。

Lhankor_Mhy

2023/06/03 05:26

1について position 以外にもスタッキングコンテキストを生成するプロパティはいくつかあります。 opacity や transform などがスタッキングコンテキストを持つので、けっこう罠にハマることがあります。 --- 2について・html は、スタッキングコンテキスト・.bg は、スタッキングコンテキスト・header は、スタッキングコンテキストではない・button は、スタッキングコンテキストつまり、スタッキングコンテキストの構造としては、html のスタッキングコンテキスト直下に、.bg と button がある状態なのです。そして、z-index がどちらも2なのでHTML登場順で上に来ています。なので、header{opacity:0.99} などとしてみるとボタンは再び下に回ります。 --- ↓この記事がとても分かりやすいです。 https://ics.media/entry/200609/

Lhankor_Mhy

2023/06/03 05:51

一応念のため、仕様の該当記述も提示しておきます。 https://www.w3.org/TR/css-flexbox-1/#painting

hatena19

2023/06/03 06:10

> つまり、スタッキングコンテキストの構造としては、html のスタッキングコンテキスト直下に、.bg と button がある状態なのです。 > そして、z-index がどちらも2なのでHTML登場順で上に来ています。なるほど、リンク先の記事を読んでみると、上記の意味が理解できました。しかし、想像以上に複雑で、完全に理解するのは難しいです。

Lhankor_Mhy

2023/06/03 07:30

わかります。まさに「俺たちは雰囲気でz-indexをやっている」って感じになりますし、実際、それでも大して困らないですよね。

Okt

2023/06/03 15:34

みなさんありがとうございます。私はまだ本当に初心者で、こうやって躓きながら少しずつ学んでいます。 z-indexの奥の深さには驚きの連続でした。本当にありがとうございました。

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