ウェブページのハンバーガーメニューの要素を一番上に持っていきたい。

前提・実現したいこと

ウェブページにあるハンバーガーメニューの要素が常に上にくるようにしたい。

トップ上では常に上にきており、クリックしてメニューも開けます。

他のメニューにいくと下の要素になってしまい、クリックもできなくなります。

発生している問題・エラーメッセージ

他の要素が上にきてしまい、ハンバーガーメニューをクリックできない
もしくは、画像の下に隠れてしまっている。

該当のソースコード

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1">
6<link rel="stylesheet" href="animate.min.css"/>
7<link rel="stylesheet" href="stylecopy.css">
8<script type="text/javascript" src="common/js/jquery-3.5.1.min.js"></script>
9<script src="wow.js"></script>
10<script>new WOW().init();
11</script>
12<script type="text/javascript" src="program.js"></script>
13
14<title>Casablanca</title>
15</head> 
16
17<body>
18<div id="index">
19<div class="slide-wrap">
20<div class="slide" id="makeImg">
21
22     <img class="slide-item" src="images/topimage.jpg"   alt="コーヒーの写真">
23     <img class="slide-item" src="images/cafe.jpg"    alt="店内">
24     <img class="slide-item" src="images/cofeeandbook.jpg" alt="コーヒーと本の写真">
25</div>
26</div>
27	</div>
28	<header>
29	<img class="logo" src="images/logo.svg" alt="Casablance" title="カサブランカ">
30	</header>
31<div class="drawer">
32    <input type="checkbox" id="drawer-check" class="drawer-hidden" >
33
34    <label for="drawer-check" class="drawer-open"><span></span></label>
35
36    <label for="drawer-check" class="drawer-close"></label>
37　　<nav class="drawer-content">
38    <ul class="drawer-list">
39      <li class="drawer-item"><a href="#index">Top</a></li>
40      <li class="drawer-item"><a href="#About">About</a></li>
41      <li class="drawer-item"><a href="#Menu">Menu</a></li>
42      <li class="drawer-item"><a href="#Access">Access</a></li>
43    </ul>
44    </nav>
45    </div>
46
47
48    <div id="About">
49        <h2 class="wow animate__animated animate__flipInX index_name">About</h2>
50<div class="About_box">
51<div class="dripcoffee_box">
52<div class="wow animate__animated animate__fadeInRight dripcoffee">
53<img src="images/About1.jpg" alt="ドリップしているコーヒーの写真" title="手作りコーヒー">
54</div>
55        <div class="wow animate__animated animate__fadeInLeft dripcoffee_index">
56            <h3>ウィーンで修行した<br class="br-sp" />マスターこだわりの一杯</h3></div>
57<div class="wow animate__animated animate__fadeInUp dripcoffee_text">
58        <br class="br-sp" />カフェ文化が世界遺産となっている
59<br class="br-sp" />オーストリア、ウィーンで修行を重ねた
60<br class="br-sp" />マスターの味わい深いコーヒーが特徴です。
61<br class="br-sp" />繁華街を小道一本挟んだ落ち着いた場所
62<br class="br-sp" />都会の喧騒から離れたひとときを
63<br class="br-sp" />ご堪能ください。</div></div>
64<div class="orange_box">
65<div class="wow animate__animated animate__fadeInLeft orange">
66<p><img src="images/orange.jpg" alt="オレンジゼリーの写真" title="オレンジゼリー"></p>
67</div>
68    <div class="wow animate__animated animate__fadeInLeft orange_index">    
69        <h3>こだわりの一杯に<br class="br-sp" />出来立てのスイーツを添えて</h3></div>
70        <div class="wow animate__animated animate__fadeInUp orange_text">
71        <br class="br-sp" />開店前早朝から心込めて仕込む
72<br class="br-sp" />マスターの絶品スイーツもご用意しております。
73<br class="br-sp" />お客様が選んだコーヒーと相性のいいスイーツを
74<br class="br-sp" />マスターからご提案も可能です。
75<br class="br-sp" />本日のコーヒーとスイーツセットでは
76<br class="br-sp" />マスターが考えた組み合わせを提供致します。
77    </div></div></div></div>
78	</body></html>

CSS
1@charset "UTF-8";
2/* CSS Document */
3.logo{
4display: block;
5width: 100%;
6background-color: #dc5f36;
7  
8}
9.slide {
10  position   : relative;
11  overflow   : hidden;
12  width      : 480px;
13  height     : 726px;
14  margin     : auto;      /* サンプルは中央寄せの背景：白 */
15  background : #fff;
16}
17.slide-wrap{
18width:100%;
19height: auto;
20}
21 
22 /*=== 画像の設定 ======================================= */
23.slide img {
24  display    : block;
25  position   : absolute;
26  width      : inherit;
27  height     : inherit;
28  left       : 100%;
29  animation  : slideAnime 12s ease infinite;
30}
31 
32 /*=== スライドのアニメーションを段差で開始する ========= */
33.slide img:nth-of-type(1) { animation-delay: 0s }
34.slide img:nth-of-type(2) { animation-delay: 4s }
35.slide img:nth-of-type(3) { animation-delay: 8s }
36 
37 /*=== スライドのアニメーション ========================= */
38@keyframes slideAnime{
39   0% { left: 100%  }
40   3% { left: 0     }
41  30% { left: 0     }
42  33% { left: -100% }
43 100% { left: -100% }
44}
45header{
46position: absolute;
47top: -20px;
48left: -186px;
49width: 220px;
50height: 260px;
51display:block;
52transform: rotate(90deg);
53}
54.drawer-hidden {
55  display: none;
56}
57.drawer{
58    position: fixed;
59    width:100%;
60    height: 70px;
61}
62/* ハンバーガーアイコンの設置スペース */
63.drawer-open {
64  position: absolute;
65  background-color: #dc5f36;
66  display: flex;
67  height: 60px;
68  width: 60px;
69  top: -730px;
70  right: 0;
71  justify-content: center;
72  align-items: center;
73  z-index: 98;
74  cursor: pointer;
75}
76
77/* ハンバーガーメニューのアイコン */
78.drawer-open span,
79.drawer-open span:before,
80.drawer-open span:after {
81  content: '';
82  display: block;
83  height: 3px;
84  width: 25px;
85  border-radius: 3px;
86  background: #f7e3af;
87  transition: .1s;
88  position: absolute;
89}
90
91/* 三本線のうち一番上の棒の位置調整 */
92.drawer-open span:before {
93  bottom: 8px;
94}
95
96/* 三本線のうち一番下の棒の位置調整 */
97.drawer-open span:after {
98  top: 8px;
99}
100  
101/* メニューのデザイン*/
102.drawer-content {
103  width: 45%;/* ここの割合を小さくすると閉じる部分の領域が広がる */
104  height: 100%;
105  position: fixed;
106  top: 0;
107  left: 100%;/* メニューを画面外へ */
108  line-height: 100px;
109  z-index: 100;
110  background: rgba(247, 227, 175, 1);
111  transition: .2s;
112  color: #70372c;
113}
114
115/* アイコンがクリックされたらメニューを表示 */
116#drawer-check:checked ~ .drawer-content {
117  left: 0;/* メニューを画面内へ */
118}
119
120/* メニューを閉じるための要素のデザイン*/
121.drawer-close {
122  width: 100%;
123  height: 100%;
124  background: rgba(247, 227, 175, 0.6);
125  position: fixed;
126  top: 0;
127  left: 100%;/* 閉じるための要素を画面外へ */
128  z-index: 99;/* 重なり順をメニューより下に*/
129	transition: .1s;
130}
131
132#drawer-check:checked ~ .drawer-close {
133  left: 0;/* 閉じるための要素を画面内へ */
134}
135a{
136color:inherit;
137text-decoration: none;
138outline: none;
139}
140ul{
141  list-style: none;
142}
143body{
144position: relative;
145font-family: "Noto Sans JP", "Noto Sans CJK JP", "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴシック", "Hiragino Sans", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
146background-color: #70372c;
147color: #f7e3af;
148margin: 0;
149}
150.index_name{
151animation: flipInX;
152margin: auto;
153animation-duration: 0.5s;
154text-align: center;
155font-size: 300%;
156line-height: 150%;
157background-color: #dc5f36;
158color: #f7e3af;
159}
160.subindex_name{
161animation: flipInX;
162margin: auto;
163animation-duration: 0.5s;
164text-align: center;
165font-size: 200%;
166line-height: 150%;
167background-color: #f7e3af;
168color: #70372c;
169}
170.About_box{
171margin: 0 auto;
172z-index: 10;
173}
174.dripcoffee_box{
175	 margin: auto;
176	width: 100%;
177	position: relative;
178	z-index: 0;
179}
180.dripcoffee_box img{
181width: 100%;
182position: relative;
183}
184.dripcoffee{
185  animation: fadeInRight; 
186  animation-duration: 0.5s; 
187　vertical-align:　top;
188padding: 0;
189margin: 0; 
190}
191.dripcoffee_index{
192  position: absolute;
193  animation: fadeInLeft; 
194  animation-duration: 2s;
195	color: #f7e3af;
196	background-color: #70372c;
197font-size: 4vw;
198 top: 50%;
199  left: 20;
200  padding: 1px 10px;
201}
202.dripcoffee_text{
203  position: absolute;
204 animation: fadeInUp; 
205  animation-duration: 2s;
206color: #f7e3af;
207background-color: #70372c;
208 top: 65%;
209  left: 20;
210	font-size: 3vw;
211  padding: 1px 10px;
212}
213.orange_box{
214margin: auto;
215width: 100%;
216position: relative;
217z-index: 1;
218}
219.orange_box img{
220width: 100%;
221z-index: 1;
222}
223.orange{
224  animation: fadeInLeft; 
225  animation-duration: 0.5s;
226　vertical-align:　top;
227padding: 0;
228margin: 0;
229z-index: 1;
230}
231.orange_index{
232 position: absolute;
233	text-align: left;
234	animation: fadeInLeft;
235  animation-duration: 2s;
236color: #f7e3af;
237font-size: 4vw;
238	background-color:#70372c;
239 	top: 50%;
240  	left: 0%;
241  padding: 1px 10px;
242z-index: 1;
243}
244.orange_text{
245	text-align: left;
246	position: absolute;
247	animation: fadeInUp;
248	animation-duration: 2s;
249	color: #f7e3af;
250	font-size: 3vw;
251	background-color:#70372c;
252	top: 65%;
253    left: 0%;
254	padding: 1px 10px;
255	z-index: 1;
256}
257

JavaScript
1$(function(){
2  $('a[href^="#"]').click(function(){
3    var speed = 500;
4    var href= $(this).attr("href");
5    var target = $(href == "#" || href == "" ? 'html' : href);
6    var position = target.offset().top;
7    $("html, body").animate({scrollTop:position}, speed, "swing");
8    return false;
9  });
10});
11$(function() {
12  $('.drawer-item>a').click(function() {
13    $('#drawer-check').removeAttr('checked').prop('checked', false).change();
14  });
15})
16$(window).on('scroll load',function () {
17    $('.animated').each(function(){
18        var $scrollBottom = $(window).scrollTop() + $(window).height();
19        var $torigger = $(this).offset().top;
20        if( $scrollBottom > $torigger) $(this).addClass('swing');
21    });
22});

試したこと

CSSにてz-index: 0;やz-index: 1;を書いて重なり順を指定してみましたが、画像の下に隠れたままです。
Safari Chorome Firefox のブラウザで同様の問題を確認しております。

Lhankor_Mhy

2021/03/13 02:13 編集

ご提示のコードを試してみましたが、問題が再現しませんでした。ハンバーガーメニューのアイコンは固定配置されておらずスクロールに合わせて、画面外へ流れてます。スクロール固定されているのはメニューだけです。おそらく、ご提示されているCSSが足りないと思います。質問に提示するコードで問題が再現することを、ご質問者の環境で確認してから質問をしてください。お互いに時間の無駄ではありませんか？