実現したいこと
ボタンをクリックした時に、画面いっぱいにグレーの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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/06/03 03:42
2023/06/03 04:47
2023/06/03 05:26
2023/06/03 05:51
2023/06/03 06:10
2023/06/03 07:30
2023/06/03 15:34