html - CSS位置:固定不显示
问题描述
在尝试为移动版本构建响应式菜单时,我遇到了一种我无法理解的行为并寻求您的建议。
我附上了两个代码的链接,它们几乎相同。(width: 100vw; height:100vh;)
唯一的区别是导航的位置,一旦用户单击“打开菜单”按钮,它就会在“全屏”上打开。
在第一个版本中,当用户单击“打开菜单”按钮时,菜单会清晰地打开,如您所见。我对第二个版本所做的更改只是将整个 nav 部分放在 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>
推荐阅读
- javascript - 更改鼠标单击侦听器和渲染方法的顺序
- java - 如何在 ConcurrentHashMap 中添加新成员
> 没有同步或锁定 - javascript - Cocos js - Android Web 浏览器显示模糊的图像
- macos - FSEvent API 不保留文件/文件夹删除的大小写/规范化
- arrays - 如何将迭代表行中的复选框值传递给Vue中的数组?
- c++ - Firefox(Windows)中的选项卡事件
- database-connection - 检查 Tomcat JDBC 连接池中的活动连接超时
- javascript - Ajax 请求 PrototypeJS
- javascript - CSS中的动态响应网格样式容器
- mongodb - MongoDB中的索引