侧边滑动导航栏关闭按钮点击失效问题求助

核心问题 #

1. 层级覆盖：你给侧边栏设置了z-index: -1，而logo的z-index: 2，导致整个侧边栏（包括关闭按钮）被logo完全遮挡，无法触发点击事件。
2. HTML结构错误：<img>标签放在了<body>标签外面，不符合HTML规范，会引发元素渲染层级异常。
3. 关闭按钮定位问题：关闭按钮使用position: relative+margin-left:200px，在侧边栏宽度250px的情况下，按钮部分超出侧边栏容器，进一步影响点击区域。

修复步骤 #

• 调整侧边栏的z-index为比logo更高的值（比如z-index: 3），确保侧边栏在logo上方。
• 将<img>标签移到<body>标签内部，规范HTML结构。
• 修改关闭按钮的定位方式为position: absolute，让它固定在侧边栏右上角，避免超出容器。
• 给logo添加position: relative，因为z-index仅对非static定位的元素生效。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: sans-serif;
  transition: background-color .5s;
}

img {
  width: 40px;
  height: 40px;
  z-index: 2;
  position: relative; /* 新增：让z-index生效 */
  transition: margin-left .5s;
}

/* Buttons to other pages */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 3; /* 修改：高于logo的z-index */
  top: 0;
  left: 0;
  background-color: #6E001C;
  overflow-x: hidden;
  transition: 0.4s;
  padding-top: 70px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 20px;
  color: #F8F5EE;
  display: block;
  transition: 0.3s;
}

/* close button */
.sidenav .closebtn {
  position: absolute; /* 修改：绝对定位 */
  top: 10px;
  right: 25px;
  font-size: 36px;
  margin-left: 0; /* 移除多余margin */
  padding-top: 5px;
}

#main {
  transition: margin-left .5s;
  padding: 8px;
  padding-top: 25px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>

<body>
<!-- 移到body内部 -->
<img id="logo" src="/templates/HR_LOGO.png">

<div id="mySidenav" class="sidenav" >
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Previous meetings</a>
  <a href="#">Create meetings</a>
  <a href="#">Classes</a>
</div>

<div id="main">
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
</div>

<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.getElementById("logo").style.marginLeft = "0px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0px";
  document.getElementById("main").style.marginLeft= "0px";
  document.getElementById("logo").style.marginLeft = "0px";
  document.body.style.backgroundColor = "white";
}
</script>

</body>
</html>

额外说明 #

• 关闭按钮现在会固定在侧边栏右上角，不会超出容器，鼠标移上去会正常显示手指指针。
• 若需要logo始终在最上方，可将logo的z-index设为4，但这样侧边栏会被logo挡住部分区域，可根据实际需求调整。

内容的提问来源于stack exchange，提问作者Baklava Baklava