CSS位置：固定不'；t show<；导航>；在html代码中的其他地方重新放置后_Html_Css_Responsive Design

CSS位置：固定不'；t show<；导航>；在html代码中的其他地方重新放置后

html css responsive-design

CSS位置：固定不'；t show<；导航>；在html代码中的其他地方重新放置后,html,css,responsive-design,Html,Css,Responsive Design,在尝试为手机版本构建响应菜单时，我遇到了一个我无法理解的行为，并寻求您的建议我附加了两个代码的链接，它们几乎相同。唯一的区别在于，一旦用户点击“打开菜单”按钮，“全屏”上打开的导航位置（宽度：100vw；高度：100vh；）在第一个版本中，当用户单击“打开菜单”按钮时，菜单将清晰地打开，如您所见。我对第二个版本所做的更改只是将整个nav部分放在HTML代码的主属性中我不明白的是：为什么要把导航放在页面的内部或其他地方？。当用户单击“打开菜单”按钮时，上方css的属性为位置：fixed和顶部

在尝试为手机版本构建响应菜单时，我遇到了一个我无法理解的行为，并寻求您的建议

我附加了两个代码的链接，它们几乎相同。唯一的区别在于，一旦用户点击“打开菜单”按钮，“全屏”上打开的导航位置

（宽度：100vw；高度：100vh；）

在第一个版本中，当用户单击“打开菜单”按钮时，菜单将清晰地打开，如您所见。我对第二个版本所做的更改只是将整个nav部分放在HTML代码的主属性中

我不明白的是：为什么要把导航放在页面的内部或其他地方？。当用户单击“打开菜单”按钮时，上方css的属性为

位置：fixed

和

顶部：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>


身体{
背景：#87cc77；
保证金：0；
字体系列：arial；
宽度：100vw；
高度：100vh；
动画：错误修正无限1s；
-webkit动画：错误修复无限1s；
}
@关键帧错误修复{
从{
填充：0；
}
到{
填充：0；
}
}
@-webkit关键帧错误修复{
从{
填充：0；
}
到{
填充：0；
}
}
#覆盖按钮{
位置：绝对位置；
右：2米；
顶部：3em；
填充：26px 11px；
z指数：5；
光标：指针；
用户选择：无；
}
#覆盖按钮跨度{
高度：4px；
宽度：35px；
边界半径：2px；
背景色：白色；
位置：相对位置；
显示：块；
转换：所有.2易入易出；
}
#覆盖按钮范围：之前{
顶部：-10px；
能见度：可见；
}
#覆盖按钮跨度：之后{
顶部：10px；
}
#覆盖按钮span:before，#覆盖按钮span:after{
高度：4px；
宽度：35px；
边界半径：2px；
背景色：白色；
位置：绝对位置；
内容：“；
转换：所有.2易入易出；
}
#覆盖按钮：悬停范围，#覆盖按钮：悬停范围：之前，#覆盖按钮：悬停范围：之后{
背景:#33333 2；
}
输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]：选中~#覆盖{
能见度：可见；
}
输入[类型=复选框]：选中~#覆盖按钮：悬停范围，输入[类型=复选框]：选中~#覆盖按钮范围{
背景：透明；
}
输入[类型=复选框]：选中~#覆盖按钮跨度：之前{
变换：旋转（45度）平移（7px，7px）；
不透明度：1；
}
输入[类型=复选框]：选中~#覆盖按钮范围：之后{
变换：旋转（-45度）平移（7px，-7px）；
}
#覆盖层{
高度：100vh；
宽度：100vw；
背景：#ec6451；
z指数：2；
可见性：隐藏；
位置：固定；
顶部：0px；
}
#覆盖{
能见度：可见；
}
#覆盖ul{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
文本对齐：居中；
高度：100vh；
左侧填充：0；
列表样式类型：无；
}
#李国宝{
填充：1em；
}
#李安{
颜色：白色；
文字装饰：无；
字号：1.5em；
}
#李娜：悬停{
颜色：#33333 2；
}





正文

第二个版本的代码（菜单未打开的版本）：

身体{
背景：#87cc77；
保证金：0；
字体系列：arial；
宽度：100vw；
高度：100vh；
动画：错误修正无限1s；
-webkit动画：错误修复无限1s；
}
@关键帧错误修复{
从{
填充：0；
}
到{
填充：0；
}
}
@-webkit关键帧错误修复{
从{
填充：0；
}
到{
填充：0；
}
}
#覆盖按钮{
位置：绝对位置；
右：2米；
顶部：3em；
填充：26px 11px；
z指数：5；
光标：指针；
用户选择：无；
}
#覆盖按钮跨度{
高度：4px；
宽度：35px；
边界半径：2px；
背景色：白色；
位置：相对位置；
显示：块；
转换：所有.2易入易出；
}
#覆盖按钮范围：之前{
顶部：-10px；
能见度：可见；
}
#覆盖按钮跨度：之后{
顶部：10px；
}
#覆盖按钮span:before，#覆盖按钮span:after{
高度：4px；
宽度：35px；
边界半径：2px；
背景色：白色；
位置：绝对位置；
内容：“；
转换：所有.2易入易出；
}
#覆盖按钮：悬停范围，#覆盖按钮：悬停范围：之前，#覆盖按钮：悬停范围：之后{
背景:#33333 2；
}
输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]：选中~#覆盖{
能见度：可见；
}
输入[类型=复选框]：选中~#覆盖按钮：悬停范围，输入[类型=复选框]：选中~#覆盖按钮范围{
背景：透明；
}
输入[类型=复选框]：选中~#覆盖按钮跨度：之前{
变换：旋转（45度）平移（7px，7px）；
不透明度：1；
}
输入[类型=复选框]：选中~#覆盖按钮范围：之后{
变换：旋转（-45度）平移（7px，-7px）；
}
#覆盖层{
高度：100vh；
宽度：100vw；
背景：#ec6451；
z指数：2；
可见性：隐藏；
位置：固定；
顶部：0px；
}
#覆盖{
能见度：可见；
}
#覆盖ul{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
文本对齐：居中；
高度：100vh；
左侧填充：0；
列表样式类型：无；
}
#李国宝{
填充：1em；
}
#李安{
颜色：白色；
文字装饰：无；
字号：1.5em；
}
#李娜：悬停{
颜色：#33333 2；
}
正文





哦，天哪，天哪。。。
<!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>

<!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>