質問編集履歴

2

コードを記述しました。

2020/02/06 03:27

投稿

namahamn
namahamn

スコア16

test CHANGED
File without changes
test CHANGED
@@ -3,3 +3,293 @@
3
3
  これは.hamburger{z-index:1;}によるものですが、css27行目のabsolute指定を消去すると適用されず、ボタンは黒背景の後ろに来てしまいます。なぜこのようなことが起こるのでしょうか。
4
4
 
5
5
  https://codepen.io/gtrtretyrey/pen/QWbWEaa
6
+
7
+
8
+
9
+ ```HTML
10
+
11
+ <!DOCTYPE html>
12
+
13
+ <html lang="en">
14
+
15
+ <head>
16
+
17
+ <meta charset="UTF-8">
18
+
19
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
20
+
21
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
22
+
23
+ <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
24
+
25
+ <link rel="stylesheet" href="style.css">
26
+
27
+ <title>Hamburger Menu Overlay</title>
28
+
29
+ </head>
30
+
31
+ <body>
32
+
33
+ <div class="menu-wrap">
34
+
35
+ <input type="checkbox" class="toggler">
36
+
37
+ <div class="hamburger"><div></div></div>
38
+
39
+ <div class="menu">
40
+
41
+ <div>
42
+
43
+ <div>
44
+
45
+
46
+
47
+ </div>
48
+
49
+ </div>
50
+
51
+ </div>
52
+
53
+ </div>
54
+
55
+ </body>
56
+
57
+ </html>
58
+
59
+ ```
60
+
61
+ ```CSS
62
+
63
+ :root {
64
+
65
+ --primary-color: rgba(13, 110, 139, 0.75);
66
+
67
+ --secondary-color: rgba(229, 148, 0 , 0.9);
68
+
69
+ --overlay-color: rgba(24, 39, 51 , 0.85);
70
+
71
+ --menu-speed: 0.75s;
72
+
73
+ }
74
+
75
+
76
+
77
+ /* ハンバーガー */
78
+
79
+ .menu-wrap{
80
+
81
+ position: fixed;
82
+
83
+ top:0;
84
+
85
+ left:0;
86
+
87
+ }
88
+
89
+
90
+
91
+ .toggler{
92
+
93
+ position: absolute;
94
+
95
+ top:0;
96
+
97
+ left:0;
98
+
99
+ width:60px;
100
+
101
+ height:60px;
102
+
103
+ z-index: 2;
104
+
105
+ opacity: 0;
106
+
107
+ cursor: pointer;
108
+
109
+ }
110
+
111
+
112
+
113
+ .hamburger{
114
+
115
+ position: absolute;
116
+
117
+ top: 0;
118
+
119
+ left: 0;
120
+
121
+ display: flex;
122
+
123
+ align-items: center;
124
+
125
+ background: rgba(13, 110, 139, 0.75);
126
+
127
+ padding: 1rem;
128
+
129
+ z-index:1;
130
+
131
+ width: 60px;
132
+
133
+ height:60px;
134
+
135
+ }
136
+
137
+
138
+
139
+ .hamburger > div{
140
+
141
+ position: relative;
142
+
143
+ background: white;
144
+
145
+ height:2px;
146
+
147
+ width:100%;
148
+
149
+ transition: all 0.4s;
150
+
151
+ }
152
+
153
+
154
+
155
+ .hamburger > div::before,
156
+
157
+ .hamburger > div::after{
158
+
159
+ content: '';
160
+
161
+ position: absolute;
162
+
163
+ top:-10px;
164
+
165
+ height: 2px;
166
+
167
+ background: inherit;
168
+
169
+ width:100%
170
+
171
+ }
172
+
173
+
174
+
175
+ .hamburger > div::after{
176
+
177
+ top:10px;
178
+
179
+ }
180
+
181
+
182
+
183
+ .toggler:checked ~.hamburger > div{
184
+
185
+ transform: rotate(135deg);
186
+
187
+ }
188
+
189
+
190
+
191
+ .toggler:checked ~.hamburger > div::before,
192
+
193
+ .toggler:checked ~.hamburger > div::after{
194
+
195
+ top:0;
196
+
197
+ transform: rotate(90deg);
198
+
199
+ }
200
+
201
+
202
+
203
+ .toggler:checked:hover ~.hamburger > div{
204
+
205
+ transform: rotate(225deg);
206
+
207
+ }
208
+
209
+
210
+
211
+
212
+
213
+
214
+
215
+ /* showmenu */
216
+
217
+ .toggler:checked~.menu>div{
218
+
219
+ transform: scale(1);
220
+
221
+ transition: 1s;
222
+
223
+ }
224
+
225
+
226
+
227
+ .toggler:checked~.menu>div>div{
228
+
229
+ opacity: 1;
230
+
231
+ transition: all 0.3s 0.5s;
232
+
233
+ }
234
+
235
+
236
+
237
+ .menu{
238
+
239
+ position: fixed;
240
+
241
+ top: 0;
242
+
243
+ left: 0;
244
+
245
+ width: 100%;
246
+
247
+ height: 100%;
248
+
249
+ display: flex;
250
+
251
+ align-items: center;
252
+
253
+ justify-content: center;
254
+
255
+ }
256
+
257
+
258
+
259
+ .menu>div{
260
+
261
+ background-color: var(--overlay-color);
262
+
263
+ border-radius: 50%;
264
+
265
+ width:200vw;
266
+
267
+ height:200vw;
268
+
269
+
270
+
271
+ display: flex;
272
+
273
+ flex: none;
274
+
275
+ align-items: center;
276
+
277
+ justify-content: center;
278
+
279
+
280
+
281
+ transform: scale(0);
282
+
283
+ }
284
+
285
+
286
+
287
+ .menu>div>div{
288
+
289
+ opacity: 0;
290
+
291
+ display: flex;
292
+
293
+ }
294
+
295
+ ```

1

urlを忘れていました

2020/02/06 03:27

投稿

namahamn
namahamn

スコア16

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,5 @@
1
1
  以下のハンバーガーメニューで、ボタンをクリックすると黒背景が広がり、ボタンが背景よりも上に来るようになっています。
2
2
 
3
3
  これは.hamburger{z-index:1;}によるものですが、css27行目のabsolute指定を消去すると適用されず、ボタンは黒背景の後ろに来てしまいます。なぜこのようなことが起こるのでしょうか。
4
+
5
+ https://codepen.io/gtrtretyrey/pen/QWbWEaa