如何滚动时让Bootstrap导航的Active元素被Footer遮挡

问题场景：
滚动页面时，带有active类的导航项（示例中的“2”）会覆盖Footer区域，需要让它像其他导航项一样被Footer遮挡。

核心原因 #

这种覆盖现象通常是因为active元素的层级（z-index）高于Footer，或者Footer未设置能触发层级控制的定位属性，导致Footer默认层级低于active元素。

解决方案 #

通过调整元素的层级关系和定位属性解决：

• 给Footer设置定位属性（如position: relative），确保z-index能生效
• 给Footer设置一个比active元素更高的z-index值
• 若Bootstrap默认给active导航项设置了较高z-index，主动覆盖降低其层级

示例代码修改 #

CSS 代码：

/* 调整Footer的定位和层级 */
footer {
  position: relative;
  z-index: 10; /* 数值需大于active元素的z-index */
  background: #fff; /* 可选：添加背景色确保遮挡效果明显 */
  padding: 1rem; /* 可选：增加内边距优化显示 */
}

/* 覆盖Bootstrap默认的active项层级（如果有） */
nav ul li.active {
  z-index: 5; /* 数值小于Footer的z-index */
}

修改后的完整HTML：

<style>
footer {
  position: relative;
  z-index: 10;
  background: #ffffff;
  padding: 1rem;
}

nav ul li.active {
  z-index: 5;
}
</style>

<nav>
  <ul>
    <li><a>1</a></li>
    <li class="active"><a href="#">2</a></li>
    <li><a>3</a></li>
  </ul>
</nav>
<footer>
back to top
</footer>

说明 #

• 静态定位（默认）的元素不支持z-index层级控制，所以必须给Footer设置position: relative或其他非静态定位
• 若Footer为透明背景，即使层级更高也无法看到遮挡效果，建议添加背景色
• z-index的数值只需保证Footer的比active元素的大即可，无需设置过大数值

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