我的問題是我遵循了一個關于如何僅使用 CSS 和 HTML 制作漢堡選單的教程。后來我做了一個英雄形象背景，放在我的網站上。但是，在移動端點擊漢堡選單時，HERO背景的全部內容覆寫了進入HERO背景區域的部分漢堡選單，從而使漢堡選單在功能上毫無用處。我嘗試尋找其他解決方案，我發現了兩個與我的相同但不完全的問題，并且沒有解決問題。
這是 HTML 代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<!-- General Stylesheets -->
<link rel="stylesheet" href="css/general_index.css">
<!-- Stylesheet for mobile users -->
<link rel="stylesheet" media="(hover: none)" href="css/mobile_nav.css">
<link rel="stylesheet" media="(hover: none)" href="css/mobile_index_general.css">
<!-- <link rel="stylesheet" meida="(hover: none)" href="css/test.css"> -->
<!-- Stylesheet for desktop users -->
<link rel="stylesheet" media="(hover: hover)" href="css/desktop_nav.css">
<link rel="stylesheet" media="(hover: hover)" href="css/desktop_index_general.css">
<style>
#errorcode {
color: red;
font-size: 1.5em;
}
#success {
color: green;
}
header {
height: 5em;
background-color: #b8241c;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<div class="hamburger-menu navlinks">
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box">
<li><a class="menu__item" href="#">Home</a></li>
<li><a class="menu__item" href="#">About</a></li>
<li><a class="menu__item" href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
<main>
<h1 class="mainTitle">Why Our Country Needs You!</h1>
<div class="hero-image">
<di class="hero-container">
<h1><span>Freedom</span></h1>
<span class="des"> TEST TEXT // EVEN MORE TEST</span>
<a href="" class="btn">Help now!</a>
</div>
</div>
<div class="container">
<div class="titleOne"><h2>We are under a massive XXX XXX!</h2></div>
<div class="titleTwo"><h2>The XXX is removing our only playing card!</h2></div>
<div class="DescOne"><p>this is just some descriptive text for title 1
this is just some descriptive text for title 1 this is just some descriptive text for title 1
this is just some descriptive text for title 1 this is just some descriptive text for title 1
this is just some descriptive text for title 1 this is just some descriptive text for title 1
this is just some descriptive text for title 1 this is just some descriptive text for title 1
this is just some descriptive text for title 1 this is just some descriptive text for title 1
this is just some descriptive text for title 1 this is just some descriptive text for title 1
this is just some descriptive text for title 1 this is just some descriptive text for title 1
</p></div>
<div class="Desc2"><p>this is just some descriptive text for title 2
this is just some descriptive text for title 2 this is just some descriptive text for title 2
this is just some descriptive text for title 2 this is just some descriptive text for title 2
this is just some descriptive text for title 2 this is just some descriptive text for title 2
this is just some descriptive text for title 2 this is just some descriptive text for title 2
this is just some descriptive text for title 2 this is just some descriptive text for title 2
this is just some descriptive text for title 2 this is just some descriptive text for title 2
this is just some descriptive text for title 2 this is just some descriptive text for title 2
this is just some descriptive text for title 2 this is just some descriptive text for title 2
</p></div>
</div>
</main>
<footer>
</footer>
</body>
</html>
這是漢堡選單的 CSS（漢堡選單和英雄影像是單獨的檔案）。
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked .menu__btn > span::before {
top: 0;
transform: rotate(0deg);
}
#menu__toggle:checked .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
left: 0 !important;
}
.menu__btn {
position: fixed;
top: 20px;
left: 20px;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 1;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #fff;
transition-duration: .25s;
}
.menu__btn > span::before {
content: '';
top: -8px;
}
.menu__btn > span::after {
content: '';
top: 8px;
}
.menu__box {
display: block;
position: fixed;
top: 0;
left: -100%;
width: 300px;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #ECEFF1;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
transition-duration: .25s;
}
.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
}
.menu__item:hover {
background-color: #CFD8DC;
}
body {
margin: 0;
}
這是 HERO 背景的 CSS：
body, html {
height: 100%;
margin: 0;
padding: 0;
background: #f1f1f1;
font-family: sans-serif;
}
.hero-image {
position: relative;
height: 500px;
overflow: hidden;
background: url(../images/famine.png) no-repeat center;
background-size: cover;
}
.hero-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
font-weight: 700;
text-transform: uppercase;
}
.hero-container h1 {
font-size: 2.5em;
letter-spacing: 0.2em;
margin: 0;
}
.hero-container h1 span {
border: 10px solid white;
padding: 6px 14px;
display: inline-block;
}
.des {
margin: 20px;
display: block;
font-size: 1.6em;
text-shadow: 0 0 10px black;
}
.btn {
color: #313131;
padding: 10px 24px;
font-size: 1.25em;
text-decoration: none;
background: #f1f1f1;
border-radius: 8px;
transition: 0.3s all;
}
.btn:hover {
opacity: 0.8;
}
對我來說，最佳解決方案是，當漢堡選單激活時，它不會隱藏在英雄影像的任何內容下。
漢堡選單激活前的網站：
漢堡選單激活后的網站：
uj5u.com熱心網友回復：
如果我正確理解您的問題，我建議您將z-index:值設定為.menu__box類似99，因此您的 CSS.menu__box應如下所示：
.menu__box {
display: block;
position: fixed;
top: 0;
left: -100%;
width: 300px;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #ECEFF1;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
transition-duration: .25s;
z-index: 99;
}（你可以z-index在上面的 CSS 底部看到）
這將告訴瀏覽器將您呈現.menu__box在網站上的所有其他內容之上。只要確保您的背景圖片沒有z-index比您的選單更高的價值，但事實并非如此。
uj5u.com熱心網友回復：
嘗試這個 。
.menu__box {
display: block;
position: fixed;
top: 0;
left: -100%;
width: 300px;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #ECEFF1;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
transition-duration: .25s;
z-index: 1;
}
如果選單框 z-index 有效，您可以跳過 hamburger-menu z-index
.hamburger-menu {
z-index:1
}
將較低的 z-index 添加到影像 div
.hero-image {
position: relative;
height: 500px;
overflow: hidden;
background: url(../images/famine.png) no-repeat center;
background-size: cover;
z-index:-1;
}
試試這個，看看它是否有效。謝謝
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/450682.html