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

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

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

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

302閲覧

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

Okt

総合スコア21

CSS3

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

HTML5

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2023/06/02 15:19

実現したいこと

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

前提

以下のコードで、bgというクラスのdiv(デフォルトでは透明)、header、main、footer4つが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/ツールのバージョンなど)

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

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

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

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

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

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

guest

回答1

0

ベストアンサー

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

css

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

投稿2023/06/03 00:07

hatena19

総合スコア33856

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

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

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/
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の奥の深さには驚きの連続でした。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問