在尝试为移动版本构建响应菜单时，我遇到了一个我无法理解的行为，并寻求您的建议。
我附上了两个代码的链接，它们几乎相同。唯一的区别在于导航的位置，一旦用户点击"打开菜单"按钮，导航就会在"全屏"(width: 100vw; height:100vh;)上打开。
在第一个版本中，当用户单击"打开菜单"按钮时，菜单会清晰地打开，如您所见。我在第二个版本中所做的更改只是将整个导航部分放在HTML代码的main属性中。
我不明白的是：为什么导航放在页面内部或其他任何地方都很重要？。当用户单击"打开菜单"按钮时，#overley css的属性为position: fixed和top: 0px;。这意味着，它应该固定在页面顶部，但在第二个版本中，当单击菜单按钮时，什么都没有发生，应该显示的窗口也没有显示。我甚至放置了z-index，以确保它不会被"隐藏"或其他什么东西。
据我所知，position:fixed with top：0px应该在顶部，但在第二个版本中没有发生这种情况，原因我真的不明白，我很高兴了解为什么会发生这种情况。
第一个版本-工作(菜单打开(
第二个版本-不工作(点击菜单按钮时不会发生任何事情(
工作版本代码：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style>
body {
background: #87cc77;
margin: 0;
font-family: arial;
width: 100vw;
height: 100vh;
animation: bugfix infinite 1s;
-webkit-animation: bugfix infinite 1s;
}
@keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
@-webkit-keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
#overlay-button {
position: absolute;
right: 2em;
top: 3em;
padding: 26px 11px;
z-index: 5;
cursor: pointer;
user-select: none;
}
#overlay-button span {
height: 4px;
width: 35px;
border-radius: 2px;
background-color: white;
position: relative;
display: block;
transition: all .2s ease-in-out;
}
#overlay-button span:before {
top: -10px;
visibility: visible;
}
#overlay-button span:after {
top: 10px;
}
#overlay-button span:before, #overlay-button span:after {
height: 4px;
width: 35px;
border-radius: 2px;
background-color: white;
position: absolute;
content: "";
transition: all .2s ease-in-out;
}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
background: #333332;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ #overlay {
visibility: visible;
}
input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
background: transparent;
}
input[type=checkbox]:checked ~ #overlay-button span:before {
transform: rotate(45deg) translate(7px, 7px);
opacity: 1;
}
input[type=checkbox]:checked ~ #overlay-button span:after {
transform: rotate(-45deg) translate(7px, -7px);
}
#overlay {
height: 100vh;
width: 100vw;
background: #ec6451;
z-index: 2;
visibility: hidden;
position: fixed;
top:0px;
}
#overlay.active {
visibility: visible;
}
#overlay ul {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
height: 100vh;
padding-left: 0;
list-style-type: none;
}
#overlay ul li {
padding: 1em;
}
#overlay ul li a {
color: white;
text-decoration: none;
font-size: 1.5em;
}
#overlay ul li a:hover {
color: #333332;
}
</style>
</head>
<body>
<input type="checkbox" id="overlay-input" />
<label for="overlay-input" id="overlay-button"><span></span></label>
<nav id="overlay">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
<main>
<div style="width:100px; height:200px; overflow:hidden">
Text
</div>
</main>
</html>
第二个版本的代码(菜单不打开的版本(：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style>
body {
background: #87cc77;
margin: 0;
font-family: arial;
width: 100vw;
height: 100vh;
animation: bugfix infinite 1s;
-webkit-animation: bugfix infinite 1s;
}
@keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
@-webkit-keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
#overlay-button {
position: absolute;
right: 2em;
top: 3em;
padding: 26px 11px;
z-index: 5;
cursor: pointer;
user-select: none;
}
#overlay-button span {
height: 4px;
width: 35px;
border-radius: 2px;
background-color: white;
position: relative;
display: block;
transition: all .2s ease-in-out;
}
#overlay-button span:before {
top: -10px;
visibility: visible;
}
#overlay-button span:after {
top: 10px;
}
#overlay-button span:before, #overlay-button span:after {
height: 4px;
width: 35px;
border-radius: 2px;
background-color: white;
position: absolute;
content: "";
transition: all .2s ease-in-out;
}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
background: #333332;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ #overlay {
visibility: visible;
}
input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
background: transparent;
}
input[type=checkbox]:checked ~ #overlay-button span:before {
transform: rotate(45deg) translate(7px, 7px);
opacity: 1;
}
input[type=checkbox]:checked ~ #overlay-button span:after {
transform: rotate(-45deg) translate(7px, -7px);
}
#overlay {
height: 100vh;
width: 100vw;
background: #ec6451;
z-index: 2;
visibility: hidden;
position: fixed;
top:0px;
}
#overlay.active {
visibility: visible;
}
#overlay ul {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
height: 100vh;
padding-left: 0;
list-style-type: none;
}
#overlay ul li {
padding: 1em;
}
#overlay ul li a {
color: white;
text-decoration: none;
font-size: 1.5em;
}
#overlay ul li a:hover {
color: #333332;
}
</style>
</head>
<body>
<input type="checkbox" id="overlay-input" />
<label for="overlay-input" id="overlay-button"><span></span></label>
</body>
<main>
<div style="width:100px; height:200px; overflow:hidden">
Text
</div>
<nav id="overlay">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</main>
</html>
哦，天哪，天哪。。。我已经有一段时间没有看到这样一个混乱的HTML代码了，这两个示例代码都很难查看。我不知道如何解释，因为我不知道CSS在面对糟糕的HTML结构时会有什么反应。请始终记住确保元素嵌套正确！
我已经为你修复了代码，但说真的。。。我真的认为，在尝试任何过于花哨的东西，比如交互式按钮或(带问题标签的(响应式设计之前，应该多学习一些关于正确编写基本HTML的知识。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<style>
body {
background: #87cc77;
margin: 0;
font-family: arial;
width: 100vw;
height: 100vh;
animation: bugfix infinite 1s;
-webkit-animation: bugfix infinite 1s;
}
@keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
@-webkit-keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
#overlay-button {
position: absolute;
right: 2em;
top: 3em;
padding: 26px 11px;
z-index: 5;
cursor: pointer;
user-select: none;
}
#overlay-button span {
height: 4px;
width: 35px;
border-radius: 2px;
background-color: white;
position: relative;
display: block;
transition: all .2s ease-in-out;
}
#overlay-button span:before {
top: -10px;
visibility: visible;
}
#overlay-button span:after {
top: 10px;
}
#overlay-button span:before, #overlay-button span:after {
height: 4px;
width: 35px;
border-radius: 2px;
background-color: white;
position: absolute;
content: "";
transition: all .2s ease-in-out;
}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
background: #333332;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ #overlay {
visibility: visible;
}
input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
background: transparent;
}
input[type=checkbox]:checked ~ #overlay-button span:before {
transform: rotate(45deg) translate(7px, 7px);
opacity: 1;
}
input[type=checkbox]:checked ~ #overlay-button span:after {
transform: rotate(-45deg) translate(7px, -7px);
}
#overlay {
height: 100vh;
width: 100vw;
background: #ec6451;
z-index: 2;
visibility: hidden;
position: fixed;
top:0px;
}
#overlay.active {
visibility: visible;
}
#overlay ul {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
height: 100vh;
padding-left: 0;
list-style-type: none;
}
#overlay ul li {
padding: 1em;
}
#overlay ul li a {
color: white;
text-decoration: none;
font-size: 1.5em;
}
#overlay ul li a:hover {
color: #333332;
}
input[type=checkbox]:checked + #overlay-button + main > #overlay {
visibility: visible;
}
</style>
</head>
<body>
<input type="checkbox" id="overlay-input" />
<label for="overlay-input" id="overlay-button"><span></span></label>
<main>
<div style="width:100px; height:200px; overflow:hidden">Text</div>
<nav id="overlay">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</main>
</body>
</html>