响应式移动端导航栏底部滑入效果：bottom:-100%无法完全隐藏的问题

你遇到的导航不滑入、只是跑到网页下方的现象，本质是两个CSS定位规则没有匹配对，不是bottom:-100%本身不能实现滑入效果：

• 定位参照系错位：如果导航没有设置position: fixed，那bottom的百分比计算参照是最近的带定位属性的父容器总高度，不是视口高度。这种情况下导航不是悬浮在视口层面的覆盖层，而是嵌在文档流的定位父级里，-100%的偏移量会把导航推到网页内容流的靠下位置，随着页面滚动就能看到它，完全达不到覆盖层的效果。
• 定位属性冲突：之前做left:-100%侧边滑入时，导航一般会保留top:0来固定垂直位置，但CSS定位规则明确：当固定/绝对定位的元素同时设置了top和bottom，且元素带有明确的height值时，bottom的设置会被浏览器直接忽略。哪怕你写了bottom:-100%，浏览器也会按照残留的top:0把导航固定在页面顶部，根本不会偏移到视口外。

HTML结构 #

<button class="menu-toggle">打开菜单</button>
<nav class="nav-overlay">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品中心</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系方式</a></li>
  </ul>
</nav>

CSS核心样式 #

.nav-overlay {
  /* 锁定定位参照系为视口 */
  position: fixed;
  /* 清除侧边导航残留的冲突属性，把top值重置为auto，避免覆盖bottom的设置 */
  top: auto;
  left: 0;
  width: 100%;
  /* 根据需求设置导航高度，全屏弹层用100vh，半屏抽屉改成对应高度即可 */
  height: 100vh;
  /* 初始隐藏：把导航完全移出视口底部 */
  bottom: -100%;
  /* 绑定bottom属性的过渡动画 */
  transition: bottom 0.3s ease-in-out;
  /* 基础视觉样式 */
  background: #222;
  color: #fff;
  padding: 2rem;
  z-index: 999;
}
/* 导航激活状态 */
.nav-overlay.active {
  /* 激活时把导航拉回视口底部边界，实现从下往上滑入的效果 */
  bottom: 0;
}
.menu-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
}

jQuery交互逻辑 #

$(function() {
  $('.menu-toggle').on('click', function() {
    $('.nav-overlay').toggleClass('active');
  });
});

• 如果是非全屏的底部抽屉，不需要硬凑bottom:-100%，直接把bottom值设为和导航实际高度一致的负值即可（比如导航高500px，就写bottom:-500px），能避免导航高度自适应时出现的偏移不准问题。
• 动画过渡尽量绑定具体的属性（比如这里的bottom），不要写transition: all，减少不必要的性能消耗。
• 做固定弹层时记得给导航和触发按钮设置足够高的z-index，避免被其他页面元素遮挡。

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