如何在html/css中移动导航栏前面的复选框

Question

我正试图制作一个复选框来检查导航栏的打开和关闭，但它漂浮在我的导航栏后面，所以我实际上看不到它。我试过使用边距和间距，但似乎无法使其发挥作用。最终，我想把导航和标题的背景颜色改成白色，但一直在玩黑色，只是为了让它出现。如果还可以更改复选框的颜色，那也太不可思议了。

代码：

/* general formatting starts here */
:root {
--gd2-blue: rgb(13, 192, 255);
--gd2-gray: #a1a1a1;
--header-color: black;
}
*,
*::before,
*::after {
box-sizing: border-box;
}

/* navigation styles start here */
#gd2-ventures-logo {
width: 150px;
height: auto;
}
header {
background: var(--header-color);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
margin-top: -67px;
height: 97px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--header-color);
width: 100%;
display: none;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: var(--gd2-gray);
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked~nav {
display: block;
}

/* content styles start here */
.content {
height: 200vh;
background-color: var(--gd2-blue);
font-family: "Aldhabi", serif;
font-weight: 300;
}
h2 {
padding-top: 150px;
color: #ffffff;
text-align: center;
font-size: 40px;
}

<header>
<h1 class="logo">
<img id="gd2-ventures-logo" src="https://lh3.googleusercontent.com/RQ5b6Z9JKq5shKOTrkpM8mdlX3c0N270wCSMB-sCjuyumIXLMsbjQGUS14jmLE31ZJ8EGuFjrg4VAAolUIAnKjqTb6Z2yguvvtemLnNhEF0TGdo42Dtsj5lcsclEXS9GYIbdUWFFADo=w2400" alt="GD2 Ventures Logo">
</h1>
<input type="checkbox" class="nav-toggle">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="content">
<h2>GD<sup>2</sup> Ventures</h2>
</div>

Answer 1

老实说，看不到错误。

/* general formatting starts here */
:root {
--gd2-blue: rgb(13, 192, 255);
--gd2-gray: #a1a1a1;
--header-color: white;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* navigation styles start here */
#gd2-ventures-logo {
width: 150px;
height: auto;
}
header {
background: var(--header-color);
text-align: center;
position: fixed;
width: 100%;
padding: 2rem 0;
display: flex;
justify-content: space-around;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--header-color);
width: 100%;
display: none;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: var(--gd2-gray);
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav{
display: block;
}
/* content styles start here */
.content {
height: 200vh;
background-color: var(--gd2-blue);
font-family: "Aldhabi", serif;
font-weight: 300;
}
h2 {
padding-top: 150px;
color: #ffffff;
text-align: center;
font-size: 40px;
}

<header>
<img id="gd2-ventures-logo" src="https://lh3.googleusercontent.com/RQ5b6Z9JKq5shKOTrkpM8mdlX3c0N270wCSMB-sCjuyumIXLMsbjQGUS14jmLE31ZJ8EGuFjrg4VAAolUIAnKjqTb6Z2yguvvtemLnNhEF0TGdo42Dtsj5lcsclEXS9GYIbdUWFFADo=w2400" alt="GD2 Ventures Logo">

<input type="checkbox" class="nav-toggle">

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="content">
<h2>GD<sup>2</sup> Ventures</h2>
</div>

Answer 2

/* general formatting starts here */
:root {
--gd2-blue: rgb(13, 192, 255);
--gd2-gray: #a1a1a1;
--header-color: black;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* navigation styles start here */
#gd2-ventures-logo {
width: 150px;
height: auto;
}
header {
background: var(--header-color);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
margin-top: -40px;
}
nav {
text-align: left;
background: var(--header-color);
width: 100%;
display: none;
}
nav ul {
padding: 0px 0px 10px 10px;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: var(--gd2-gray);
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
}
nav a:hover {
color: #000;
}
/* content styles start here */
.content {
height: 200vh;
background-color: var(--gd2-blue);
font-family: "Aldhabi", serif;
font-weight: 300;
}
h2 {
padding-top: 150px;
color: #ffffff;
text-align: center;
font-size: 40px;
}
.nav-toggle {
display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function myFunction() {
var checkBox = document.getElementById("nav-toggle");
var text = document.getElementById("nav");
if (checkBox.checked == true){
nav.style.display = "block";
} else {
nav.style.display = "none";
}
}
</script>
<header>
<h1 class="logo">
<img id="gd2-ventures-logo" src="https://lh3.googleusercontent.com/RQ5b6Z9JKq5shKOTrkpM8mdlX3c0N270wCSMB-sCjuyumIXLMsbjQGUS14jmLE31ZJ8EGuFjrg4VAAolUIAnKjqTb6Z2yguvvtemLnNhEF0TGdo42Dtsj5lcsclEXS9GYIbdUWFFADo=w2400" alt="GD2 Ventures Logo">
<div>
<input type="checkbox" id="nav-toggle" class="nav-toggle" onclick="myFunction()">
</div>
</h1>

<nav id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="content">
<h2>GD<sup>2</sup> Ventures</h2>
</div>