html 重なりの指定

参考にしたサイトでは、classを使って、z-indexの数字によって、大きい順に表示する様に設定しているのですが、classが多くすべてにz-indexをつけるのではなく、
一番上に表示されるのは、このclassという事は出来ないのでしょうか？　

例)　class名: ("red black white")
一番表に表示指定class名: red

css
1.red{
2			position: absolute
3		}

現段階の表示結果

現在、アイコンをタップするとハンバーガーメニューができる様にしているのですが、スクロールすると表示が切り替わる背景画像が、一番上に表示されている為、ハンバーガーメニューが表示されません。

ハンバーガーメニューのコード

html
1header><link rel="stylesheet" type="text/css" href="ham-01.css">
2  		<div id="nav-drawer">
3      		<input id="nav-input" type="checkbox" class="nav-unshown">
4     		<label id="nav-open" for="nav-input"><span></span></label>
5      		<label class="nav-unshown" id="nav-close" for="nav-input"></label>
6      	<div id="nav-content">
7      	<a href="ev_index.html">HOME</a>
8		<a href="ev_exp.html">EVENT</a>
9		<a href="">POSTER</a>
10		<a href="ev_school.html">SCHOOL</a>
11		<a href="ev_access.html">ACCESS</a>
12		<a href="#">ABOUT THIS SITE</a>
13		</div>
14	</header>

css
1    header {
2              padding:10px;
3        }
4        #nav-content a {
5             z-index: 30;
6              display: block;
7              text-align: center;
8              width: 80%;
9              max-width: 300px;
10              margin: 1rem auto;
11              padding: 0.5rem 0;
12              background: #777;
13              color: #fff;
14              font-famile: sans-serif;
15              text-decoration: none
16        }
17        #nav-drawer {
18              position: fixed;top: 0:left:0;
19        }
20
21        /*チェックボックス等は非表示に*/
22        .nav-unshown {
23              display:none;
24        }
25
26        /*アイコンのスペース*/
27        #nav-open {
28              display: inline-block;
29              width: 30px;
30              height: 22px;
31              vertical-align: middle;
32        }
33
34        /*ハンバーガーアイコンをCSSだけで表現*/
35        #nav-open span, #nav-open span:before, #nav-open span:after {
36              position: absolute;
37              height: 3px;/*線の太さ*/
38              width: 25px;/*長さ*/
39              border-radius: 3px;
40              background: #555;
41              display: block;
42              content: '';
43              cursor: pointer;
44        }
45        #nav-open span:before {
46              bottom: -8px;
47        }
48        #nav-open span:after {
49              bottom: -16px;
50        }
51
52        /*閉じる用の薄黒カバー*/
53        #nav-close {
54          display: none;/*はじめは隠しておく*/
55          position: fixed;
56          z-index: 99;
57          top: 0;/*全体に広がるように*/
58          left: 0;
59          width: 100%;
60          height: 100%;
61          background: black;
62          opacity: 0;
63          transition: .3s ease-in-out;
64        }    
65
66        /*中身*/
67        #nav-content {
68              overflow: auto;
69          position: fixed;
70          top: 0;
71          left: 0;
72          z-index: 9999;/*最前面に*/
73         width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
74          max-width: 330px;/*最大幅（調整してください）*/
75          height: 100%;
76          background: #333;/*背景色*/
77          transition: .3s ease-in-out;/*滑らかに表示*/
78          -webkit-transform: translateX(-105%);
79          transform: translateX(-105%);/*左に隠しておく*/
80        }
81
82        /*チェックが入ったらもろもろ表示*/
83        #nav-input:checked ~ #nav-close {
84          display: block;/*カバーを表示*/
85          opacity: .5;
86        }
87
88        #nav-input:checked ~ #nav-content {
89            -webkit-transform: translateX(0%);
90            transform: translateX(0%);/*中身を表示（右へスライド）*/
91            box-shadow: 6px 0 25px rgba(0,0,0,.15);
92        }
93
94               
95        }
96        .site-header{
97            background: #fff;
98            display: flex;
99            padding: 60px 20px;
100            position: fixed;
101            justify-content: space-between;
102            width: 100%;
103        }
104        .site-logo img{
105            height: 20px;
106            width: auto;
107        }
108        .gnav__menu{
109            display: flex;
110        }
111        .gnav__menu__item{
112            margin-left: 20px;
113        }
114        .gnav__menu__item a{
115            color: #333;
116            text-decoration: none;
117        }
118        .hero{
119            max-height: 500px;
120            overflow: hidden;
121        }
122        .hero img{
123            height: auto;
124            width: 100%;
125        }
126        .content{
127            line-height: 1.6;
128            margin: 0 auto;
129            padding-top: 100px;
130            width: 800px;
131        }
132        .content p{
133            margin-bottom: 40px;
134        }
135        .site-footer{
136            background: #333;
137            padding: 80px 0;
138        }
139        .copyright{
140            color: #fff;
141            font-size: 12px;
142            text-align: center;
143        }

背景画像

html
1<div class="scroll-bg bg-color01" class="start">
2			<p style="background-color:#ffcc99;">説明文が入る</p>
3		  </div>
4        <div class="fixed-bg bg01 sentence">
5                <p>タイトル</p>
6            </div>
7             
8            <div class="scroll-bg bg-color01" class="start">
9                <p style="background-color:#ffcc99;">説明文が入る。</p>
10              </div>
11             
12            <div class="fixed-bg bg02 sentence">
13                <p>タイトル</p>
14            </div>
15             
16            <div class="scroll-bg bg-color02">
17                <p style="background-color:#ffcc99;">説明文が入る</p>
18            </div>

css
1.fixed-bg {
2  min-height: 100vh;
3  background-attachment: fixed;
4  background-size: cover;
5  background-position: center;
6}
7 
8.bg01 {
9  background-image: url(170923.png);
10  /*background-size: contain; */
11  background-repeat: no-repeat;
12  background-size: cover;
13  }
14 
15.bg02 {
16  background-image: url(7211.png);
17  background-repeat: no-repeat;
18  background-size: cover;
19}
20 
21.bg03 {
22  background-image: url(2377.png);
23  background-repeat: no-repeat;
24  background-size: cover;
25}
26
27.sentence{
28  position: relative;
29}
30
31.sentence p{
32  position: absolute;
33  top: 50%;
34  left: 50%;
35  -ms-transform: translate(-50%,-50%);
36  -webkit-transform: translate(-50%,-50%);
37  transform: translate(-50%,-50%);
38  margin:0;
39  padding:0;
40  color: white;/*文字は白に*/
41  font-weight: bold; /*太字に*/
42  font-size: 2em;/*サイズ2倍*/
43  font-family :Quicksand, sans-serif;/*Google Font*/
44}
45
46.sentence img{
47  width: 100%;
48}

Lhankor_Mhy

2019/09/13 09:00

「一つのclassを設定し一番表に表示する」とは、具体的にはどういうことですか？もう少しわかりやすく書けますか？例のコードで言うと、black や white にはルールを書きたくない、ということでしょうか？

yoshinavi

2019/09/13 11:13

どの要素にどのプロパティで重ね順を設定しているのか、参考先を良く見てください。今の提示の例では、どのようにしたいのかが不明です。補足してください。

退会済みユーザー

2019/09/13 12:32

沢山のClassがあるので、1番上に表示したいものを、全てのClassで設定しなくてもできるかが知りたいです。

yoshinavi

2019/09/13 12:58

条件により出来ますが、HTMLを提示してください。現状だけでは回答出来かねます。

退会済みユーザー

2019/09/13 13:16

提示しましたので、ご確認ください

yoshinavi

2019/09/14 05:11

回答を提示しましたが、最初の質問と、編集後の質問では違いがありすぎます。一度見直されたほうが良いかと思います。

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

回答4件

ベストアンサー

「スクロールすると表示が切り替わる背景画像」がなんのことなのかわかりませんが、現在のCSSのようにz-indexに可能な限り大きな値を与えておくしかないと思います。

css
1z-index: 9223372036854775807;

[CSS] z-index の最大値について調べた - 零弐壱蜂

ただし、スタックコンテキストの関係でこれでも必ず最前面になるとは限らないです。背景が上に行ってしまう、というのはスタックコンテキストの影響である、と考えた方がいいかもしれません。そうだとすれば、HTML構造の見直しが必要になるかもしれません。
[CSS] z-index とスタックコンテキスト - Qiita
要素の重なりについて本気出して考えてみた（z-indexとか何とかとか） – No.1026

投稿2019/09/14 00:30

Lhankor_Mhy

総合スコア36928

退会済みユーザー

2019/09/14 05:54

一度表示したのですが、上書き保存していなくまた失敗してしまいました。提示してくださったコードはどこに書き込めばよいでしょうか？

Lhankor_Mhy

2019/09/14 06:08

試したわけではないのですが、#nav-content でいいのでは？

退会済みユーザー

2019/09/14 13:06 編集

#nav-content に入れてみたのですが、フェードインした際にも、表示されてしまいます。コード） #nav-drawer { position: fixed;top: 0:left:0; z-index: 9223372036854775807; }

退会済みユーザー

2019/09/14 13:08

無事、解決することができました。上記で記載した原因は、フェードインでz-idnexが指定されていた数値を超えていた為、表示されている事がわかりました。ありがとうございます。

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

必要な個所に付ければ良いかと思います。

CSS
1#nav-open {
2  display: inline-block;
3  width: 30px;
4  height: 22px;
5  vertical-align: middle;
6  position: relative; /* ← 追加 */
7  z-index: 10000;     /* ← 追加 */
8}

投稿2019/09/14 05:07

yoshinavi

総合スコア3523

一つのclassを設定し一番表に表示する

定義がよくわからないです

css
1<style>
2.colors{position:absolute;width:100px;height:100px;border:solid 1px blue;}
3.red{background-Color:red;z-index:1;}
4.black{background-Color:black;z-index:2;left:20px;top:20px;}
5.white{background-Color:white;z-index:3;left:40px;top:40px;}
6</style>
7<div class="colors red"></div>
8<div class="colors black"></div>
9<div class="colors white"></div>