Vue项目中overflow hidden失效：响应式导航栏溢出问题排查

你的问题根源在于两点：

• 绝对定位的.navbar没有相对定位的父容器，导致它相对于整个视口定位，父容器的overflow:hidden无法对其生效
• 使用left:100vw移出页面，会因为视口宽度计算逻辑，加上元素自身宽度，引发横向溢出

以下是修复后的关键代码：

/* 给.navbar的外层容器.main-nav添加相对定位和溢出隐藏 */
.main-nav {
  position: relative;
  overflow: hidden;
}

.navbar {
  position: absolute;
  height: 87.9vh;
  width: 48vw;
  padding: 7rem 0rem 0rem 1rem;
  background-color: #003b59;
  opacity: 0.8;
  left: 100%; /* 改为100%，相对于父容器.main-nav的宽度偏移 */
  top: 0; /* 调整top值，因为现在相对于.main-nav定位 */
  z-index: 3;
}

/* 可选：添加全局样式避免默认横向滚动 */
body {
  margin: 0;
  overflow-x: hidden;
}

另外建议优化你的DOM结构，.navbar不需要嵌套在<li>里，直接作为.main-nav的子元素更清晰：

<ul class="main-nav">
  <li><img class="ham" src="../assets/shared/icon-hamburger.svg" alt="" @click="navbar"></li>
  <li><img class="close" src="../assets/shared/icon-close.svg" alt=""></li>
  <!-- 直接将.navbar放在.main-nav下，取消li嵌套 -->
  <ul class="navbar" ref="nav">
    <li><RouterLink class="router-link home" to="/"><span class="number">01</span> Home</RouterLink></li>
    <li><RouterLink class="router-link" to="/crews"><span class="number">02</span> Crews</RouterLink></li>
    <li><RouterLink class="router-link" to="/destination"><span class="number">03</span> Destinations</RouterLink></li>
    <li><RouterLink class="router-link" to="/technology"><span class="number">04</span> Technology</RouterLink></li>
  </ul>
</ul>

调整后，.navbar会完全受.main-nav的overflow:hidden控制，移出父容器后不会出现溢出问题。

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