如何修复表单元素（单选框/复选框/日期控件）穿透隐藏菜单栏问题

为课程制作的网站添加了汉堡图标式隐藏菜单栏，该功能在其他页面运行正常，但在表单页面点击汉堡图标后，菜单栏覆盖页面时，单选框、复选框等表单元素会穿透显示。

• 正常表现：其他页面菜单栏展开后完全覆盖页面内容，无元素穿透
• 异常表现：表单页面菜单栏展开时，表单控件穿透菜单栏显示

相关代码 #

CSS #

.logo,
.menu {
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
  font-family: sans-serif;
}

nav {
  height: 80px;
  width: 100%;
}

label.logo {
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 0 100px;
  font-weight: bold;
}

nav ul {
  margin-right: 20px;
  float: right;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

.menu a {
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 7px 30px;
  border-radius: 20px;
  text-transform: uppercase;
}

.menu a:hover {
  background: blueviolet;
  transition: .5s;
}

.checkbtn {
  font-size: 30px;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}

#check {
  display: none;
}

@media (max-width:952px) {
  label.logo {
    font-size: 30px;
    padding-left: 50px;
  }
  nav ul li a {
    font-size: 16px;
  }
}

@media (max-width:2000px) {
  .checkbtn {
    display: block;
  }
  nav ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #2d0858;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li {
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }
  nav ul li a {
    font-size: 20px;
  }
  .menu a:hover {
    background: none;
    color: blueviolet;
  }
  #check:checked~ul {
    left: 0
  }
}

HTML #

<nav class="navbar">
  <input type="checkbox" id="check">
  <label for="check" class="checkbtn"> &#8801; </label>
  <label class="logo"> PeakIT </label>
  <ul class="menu">
    <li><a id="home" href="index.html">Home Page</a></li>
    <li><a id="about" href="about.html">About Me </a></li>
    <li><a id="apply" href="apply.html"> Apply now</a> </li>
    <li><a id="jobs" href="jobs.html">Careers</a></li>
    <li><a id="enhancements" href="enhancements.html">Enhancements</a></li>
    <li><a id="contact" href=mailto:104467971@student.swin.edu.au> Contact</a></li>
  </ul>
</nav>

问题出在堆叠层级（z-index）：表单元素的默认层级高于展开后的菜单栏，导致控件穿透显示。只需给菜单栏的<ul>添加足够高的z-index值即可，完全不需要JavaScript。

修改CSS中媒体查询内的nav ul样式，添加z-index: 9999;：

@media (max-width:2000px) {
  .checkbtn {
    display: block;
  }
  nav ul {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #2d0858;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
    z-index: 9999; /* 新增：提升菜单栏层级 */
  }
  /* 其余样式保持不变 */
}

原理 #

z-index属性控制元素在堆叠上下文中的显示顺序，值越高元素越靠上。设置9999这类高值后，菜单栏会覆盖所有表单元素，解决穿透问题。

内容的提问来源于stack exchange，提问作者Omar Al angurli