html、cssでローディングアニメを表示したが背景色が変わらない部分がある

前提・実現したいこと

フロントエンドとバックエンドでクラウド間通信中はローディングアニメを表示しています。ローディングアニメを表示中は背景色を灰色の一色だけ表示させたいです。

［背景色になっていない部品(NG)］
問題：部品によって灰色表示なっていない箇所があります。
・水族館の文言(ID _systemname)
・ビックリアイコン画像(ID error_mark)
・オスチェックボックス(ID aquachOff)
・JQUEYテーブルの見出し(ID fishArea-table > th 魚名時間水槽)
・JQUEYテーブルの全てのセル
・餌ボタン(ID fishAreaSet)

該当のソースコード

html
1<!DOCTYPE html>
2<head>
3	<meta charset="utf-8"/>
4	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>水族館</title>
7	<link rel="stylesheet" type="text/css" href="./css/aquarium.css"/>
8	<link rel="stylesheet" type="text/css" href="./css/loadingIcon.css">
9 	<script src="./js/jquery-3.6.0.min.js"></script>
10</head>
11<body>
12	<!--ローディングアニメ表示-->
13	<svg id="shade_loading" class="_regist_csv_shade" style="display:none">
14    	<rect id="shade_color_result_dialog" class="_regist_csv_shade_color" rx="0" ry="0" x="0" y="0" width="100%" height="100%"></rect>
15	</svg>
16	<div class="loading" style="display:none" id="loading_icon">
17    	<i class="fas fa-spinner fa-rotate-right fa-5x fa-spin"></i>
18	</div>
19
20	<div class="row">
21		<div class="panel">
22			<div class="panel-heading">
23				<div id="_systemname">
24					<span>水族館</span>
25				</div>
26			</div>
27
28			<div class="panel-body">
29				<div class="panel-body-btm">
30					<div class="form_topArea_3btn">
31						<img src="./img/conerr.png" id="error_mark" style="visibility:visible;">
32					</div>
33					<div class="form_fishArea">
34					<div id="fishLabel"><span>水質</span></div>
35					<div class="fishLabel_border"></div>
36
37					<div class="aquaChangeArea" id="makeImg">
38  						<input type="radio" name="sample1radio" id="aquachOff">
39    						<label for="aquachOff">オス</label>
40  						<input type="radio" name="sample1radio" id="aquachOn">
41    						<label for="aquachOn">メス</label>
42					</div>
43
44			<table id="fishArea-table">
45				<thead>
46				<tr>
47                                    <th></th>
48                                    <th></th>
49                                    <th>魚名</th>
50                                    <th>時間</th>
51                                    <th></th>
52                                    <th></th>
53                                    <th>水槽</th>
54				</tr>
55				</thead>
56                            <tbody id="fishArea-tbody" style="border-top:2px #C7C7C7 solid;">
57                                <tr>
58                                    <td>
59                                  	<input type="button" class="aquaAddList">
60                                    </td>
61                                    <td>
62                                  	<input type="button" class="aquaRemoveList">
63                                    </td>
64                  		    <td>
65                  		        <input type="text" id="aquathreshold" class="thresholdText" placeholder=""></input>
66                  		    </td>
67                                    <td>
68                                  	<select id="startTimeList" class="fishTime"  tabindex="-1">
69                    				<option value="0">00</option>
70                                        </select>
71                                    :00</td>
72                                    <td width="1px"><span>～</span></td>
73                                    <td align="left" width="150px">
74                                    <select id="endTimeList" class="fishTime" tabindex="-1">
75                    		    	<option value="0">00</option>
76                                    </select>
77                                    :00</td>
78                                    <td align="left" width="150px"><input id="boilNaumUnits" class="boilNum" value="" disabled align="left"></td>
79                                    <td width="400px"></td>
80                                </tr>
81                            </tbody>
82                        </table>
83                  		<button id="fishAreaSet" class="fishSetBtn" disabled>餌</button>
84				</div>
85				</div>
86			</div>
87		</div>
88	</div>
89</body>

css
1* {
2	margin: 0;
3	padding: 0;
4	box-sizing: border-box;
5	border: none;
6}
7
8*:focus {
9	outline: none;
10}
11
12body {
13	background-color: #E9E9E9;
14}
15
16.loading {
17  z-index: 1;
18  position: fixed;
19  top: 50%;
20  left: 50%;
21  color: white;
22}
23._regist_csv_shade {
24  position: fixed;
25  overflow: visible;
26  left: 0px;
27  top: 0px;
28}
29._regist_csv_shade_color {
30  fill: rgba(0,0,0,0.4);
31}
32
33.form_topArea_3btn {
34	width: 100%;
35	display: flex;
36}
37
38.panel-heading {
39	background: 0% 0% no-repeat padding-box;
40	background-color: #08c255;
41	box-shadow: 0px 5px 6px #00000040;
42	opacity: 1;
43	height: 56px;
44	padding-top: 13px;
45}
46.row {
47	pointer-events: auto;
48	zoom          : 100%;
49}
50
51.panel-body {
52	margin-top: 20px;
53	margin-left: 6vw;
54	margin-right: 6vw;
55	background: #FFFFFF 0% 0% no-repeat padding-box;
56	box-shadow: 0px 2px 6px #00000040;
57	opacity: 1;
58}
59
60#_systemname {
61	margin-left: 6vw;
62	top: 13px;
63	position: absolute;
64	overflow: visible;
65	width: 400px;
66	white-space: nowrap;
67	text-align: left;
68	font-family: Meiryo;
69	font-style: normal;
70	font-weight: bold;
71	font-size: 20px;
72	color: rgba(255, 255, 255, 1);
73	overflow: hidden;
74}
75
76.panel-body {
77	margin-top: 20px;
78	margin-left: 6vw;
79	margin-right: 6vw;
80	margin-bottom: 20px;
81	background: #FFFFFF 0% 0% no-repeat padding-box;
82	box-shadow: 0px 2px 6px #00000040;
83	opacity: 1;
84}
85
86.panel-body-btm {
87	padding-top: 35px;
88	padding-left: 3.6vw;
89	padding-right: 3.6vw;
90	padding-bottom: 300px;
91}
92
93.form_topArea_3btn {
94	width: 100%;
95	display: flex;
96}
97
98#error_mark {
99	position: absolute;
100	width: 40px;
101	height: 40px;
102	margin-left: 21vw;
103	top: 190px;
104	overflow: visible;
105}
106
107.form_fishArea {
108	margin-top: 111px;
109}
110.form_grpMngArea {
111	margin-top: 300px;
112}
113
114#fishLabel {
115	text-align     : left;
116	font           : normal normal bold 20px/30px Meiryo;
117	letter-spacing : 0px;
118	color          : #3C3C3C;
119	opacity        : 1;
120	width		   : 120px;
121	height         : 30px;
122}
123
124.aquaChangeArea {
125  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.251));
126  position       : absolute;
127  width          : 15%;     
128  height         : 40px;    
129  top            : 351px;
130  margin-left    : 64vw;
131}
132
133.aquaChangeArea input[type="radio"] {
134  display        : none;
135}
136 
137.aquaChangeArea label {
138  display        : block;
139  position       : absolute;
140  top            : 0;
141  bottom         : 0;
142  left           : 0;
143  right          : 0;
144  text-align     : center;
145  line-height    : 40px;
146  font-family    : Meiryo;
147  font-style     : normal;
148  font-weight    : normal;
149  font-size      : 16px;
150  border         : 2px solid #ccc;
151}
152
153.aquaChangeArea #aquachOff + label {
154  right          : 50%;
155  background: #FFFFFF 0% 0% no-repeat padding-box;
156  box-shadow: 0px 3px 6px #00000040;
157  color          : #666;
158  border-right   : none;
159  line-height    : 30px;
160}
161
162
163.aquaChangeArea #aquachOff:checked +label {
164
165  background     : linear-gradient(175deg, #CA000B, #CA000B, #CA000B);
166  color          : #fff;
167  display        : table-cell;
168
169}
170
171.aquaChangeArea #aquachOn + label {
172  left           : 50%;
173  color          : #666;
174  border-left    : none;
175  line-height    : 30px;
176}
177
178.aquaChangeArea #aquachOn:checked +label {
179  background     : linear-gradient(180deg, #0a14ed, #0a14ed, #0a14ed);
180  color          : #fff;
181}
182
183.fishLabel_border {
184	margin-top: 13px;
185	margin-bottom: 37.89px;
186	width: 100%;
187	border: 1px solid #C7C7C7;
188	opacity: 1;
189}
190#fishSetBtn {
191	fill: rgba(255,255,255,1);
192}
193.fishSetBtn {
194	filter			: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.251));
195	position		: absolute;
196	width			: 110px;
197	height			: 40px;
198	margin-left		: 0vw;
199	top				: 630px;
200	white-space		: nowrap;
201	text-align		: center;
202	font-family		: Meiryo;
203	font-style		: normal;
204	font-weight		: normal;
205	font-size		: 16px;
206	background		: #FFFFFF 0% 0% no-repeat padding-box;
207	box-shadow		: 0px 3px 6px #00000040;
208	opacity			: 1;
209}
210#fishArea-table {
211  position: absolute;
212  width: 80%;
213  height: 0px;
214  margin-left: 0vw;
215  top: 461px;
216  font-family: Meiryo;
217  font-size: 15px;
218  font-style: normal;
219  color: #707070;
220  border-collapse: collapse;
221  border-width:1px;
222}
223
224#fishArea-table th,
225#fishArea-table td {
226  padding: 12px 5px;
227  text-align: center;
228  border-width:1px;
229  border-bottom-style: solid;
230  border-color: #00000040;
231}
232
233#fishArea-table th {
234  background-color: #FFFFFF;
235  color: #656565;
236  border: none;
237  font-family: Meiryo;
238  font-style: normal;
239  font-weight: normal;
240  font-size: 13px;
241  border-width:1px;
242  border-color: #00000040;
243}
244
245#fishArea-table input,
246#fishArea-table select {
247  width: 50px;
248  cursor: pointer;
249}
250
251#fishArea-table i {
252  font-family: Meiryo;
253  font-style: normal;
254  font-weight: normal;
255  font-size: 18px;
256  color: rgba(112,112,112,1);
257}
258
259#fishArea-tbody tr:first-child {
260}
261
262#aquathreshold {
263	border         : 2px solid #f0f0f0;
264	cursor         : pointer;
265	pointer-events : auto;
266	font           : normal normal normal 15px/23px;
267}
268.boilNum {
269	cursor              : none;
270	pointer-events      : none;
271	text-align          : center;
272	font-family         : Meiryo;
273	font-style          : normal;
274	font-weight         : normal;
275	font-size           : 16px;
276	color               : rgba(101,101,101,1);	
277	background-color    : #ffffff;
278	border              : none;
279	font: normal normal normal 15px/23px;
280}
281
282.fishTime {
283	width           : 10%;
284	border          : 1px solid #C7C7C7;
285	opacity         : 1;
286	pointer-events  : none;
287}

試したこと

CSSにて親子関係、class、idの優先順位が影響していると考えて修正を試みましたが何も変わりませんでした。

お願い

少しでもローディング中は、背景色一色で表示させたいです。何かお分かりになりましたらご教示よろしくお願い致します。

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

回答1件

ベストアンサー

shadeのz-indexを調整すれば、タイトル等より手前に来ると思います。

css
1._regist_csv_shade {
2  z-index: 2;
3}

投稿2021/08/08 03:35

編集2021/08/08 03:55

Masa-Shin

総合スコア269

garou

2021/08/08 05:19

Masa-Shin様ご回答ありがとうございます。 z-indexをローディングアイコンと背景で調整して、期待値通りの動作を確認しました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

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

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