这事儿其实很简单，核心就是利用CSS的z-index层级控制来实现。咱们一步步来：

核心问题分析 #

现在你的固定按钮设置了position: fixed; z-index: 2;，而<footer>默认是静态定位（position: static），这种情况下z-index不生效，所以footer里的按钮自然会被固定按钮压在下面。要让footer按钮在滚动到底部时覆盖固定按钮，只需要调整层级关系就行。

方案一：纯CSS实现（推荐） #

这种方案最简洁，不需要写JS。我们只需要给footer或者footer内的按钮设置比固定按钮更高的z-index，同时确保元素是定位元素（position不为static）。

选项1：让整个Footer层级更高 #

如果希望footer整体覆盖固定按钮（包括背景），给footer添加以下样式：

footer {
  position: relative; /* 必须设置定位才能让z-index生效 */
  z-index: 3; /* 数值比固定按钮的z-index:2大即可 */
}

当你滚动到页面底部，footer进入视口底部时，因为它的层级更高，会直接覆盖在固定按钮上方，里面的按钮自然也就显示在最上层了。

选项2：仅让Footer内的按钮层级更高 #

如果只想让footer里的按钮覆盖，footer其他部分保持在固定按钮下方，那就单独给按钮设置样式：

.button-in-footer {
  position: relative; /* 开启定位 */
  z-index: 3; /* 高于固定按钮的z-index */
}

这样只有footer里的按钮会显示在固定按钮上面，footer的其他区域还是在固定按钮下方。

方案二：JavaScript动态控制（适合复杂场景） #

如果你需要更精细的控制（比如只在footer完全进入视口才切换层级），可以用滚动监听来动态调整z-index：

// 监听页面滚动事件
window.addEventListener('scroll', function() {
  const footer = document.querySelector('footer');
  const footerPos = footer.getBoundingClientRect();
  
  // 判断footer是否已经滚动到视口范围内
  if (footerPos.bottom <= window.innerHeight) {
    // 给footer按钮设置更高层级
    document.querySelector('.button-in-footer').style.zIndex = '3';
    // 也可以反过来把固定按钮的层级调低：
    // document.querySelectorAll('.fixed-bottom').forEach(btn => btn.style.zIndex = '1');
  } else {
    // 离开footer区域后恢复原有层级
    document.querySelector('.button-in-footer').style.zIndex = 'auto';
    // document.querySelectorAll('.fixed-bottom').forEach(btn => btn.style.zIndex = '2');
  }
});

注意事项 #

• z-index只对定位元素生效（position为relative/absolute/fixed/sticky），所以一定要给需要设置z-index的元素加上定位属性。
• 确保没有其他父元素的z-index影响层级（比如如果footer的某个父元素设置了较低的z-index，那footer的z-index也会受限制）。

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