移动端顶部滑动导航覆盖头部问题求助

我之前也碰到过这种导航滑出来就把头部盖住的情况，其实核心就是元素层级（z-index）和定位属性没配合到位，咱们一步步来调整：

1. 先确保头部的层级足够高 #

z-index 只对非 static 定位的元素生效，所以首先得给你的头部（.topHeader）设置一个非默认的定位，再配上足够高的 z-index 值：

.topHeader {
  position: relative; /* 或者用 fixed，这样滚动时头部也能固定在顶部 */
  z-index: 100; /* 这个值要比导航的 z-index 大，比如设100就很稳妥 */
  background-color: #fff; /* 别忘了加背景色！不然导航会透过头部显示出来 */
  width: 100%; /* 如果用fixed的话，要加宽度保证占满屏幕 */
  top: 0; /* fixed定位时加上这个，让头部贴在顶部 */
}

2. 调整导航的层级和定位位置 #

接下来处理你的滑出导航，要么降低它的 z-index，要么让它从头部下方开始滑出：

方案一：降低导航的z-index #

/* 假设你的滑出导航类是 .slideNav */
.slideNav {
  position: fixed; /* 或者absolute，根据你的布局需求选 */
  top: 0;
  z-index: 50; /* 这个值一定要比头部的z-index小 */
  /* 其他导航样式：宽度、背景色、滑移动画等 */
}

方案二：让导航从头部下方滑出 #

如果不想靠z-index，也可以直接把导航的起始位置设在头部下方，比如头部高度是60px：

.slideNav {
  position: fixed;
  top: 60px; /* 和头部高度一致，这样导航滑出来就刚好在头部下面 */
  left: 0;
  width: 100%;
  /* 其他导航样式 */
}

3. 排查隐藏的层级干扰 #

如果上面两步还没解决，那得检查一下页面里其他元素的z-index，比如有没有其他fixed定位的元素z-index比头部还高？或者导航的父级元素有没有设置z-index，导致导航的层级被父级带起来了？

举个例子，如果导航的父级设置了z-index: 200，那就算导航自己设了50，它的实际层级还是跟着父级走的，这时候就得调整父级的z-index，或者把导航移到层级更低的父级里。

按照这个思路调整，应该就能让头部稳稳待在顶层，不会被导航覆盖啦！

内容的提问来源于stack exchange，提问作者Alexis Vilaça