HTML页面多个向下滚动按钮仅首个显示问题求助

• CSS定位冲突：如果所有按钮都用了position: absolute属性，但后续按钮所在的父级区块没有设置position: relative，后续按钮会相对于整个页面定位，可能被其他元素遮挡或者偏移到可视区域外
• ID重复冲突：如果你给多个按钮绑定了同一个ID选择器，CSS规则仅对第一个匹配的ID生效，后续同ID元素的样式不会被识别
• 层级（z-index）设置过低：后续按钮的z-index小于其他覆盖在上方的元素，或是按钮父元素的z-index低于其他区块，都会导致按钮被遮挡不可见
• 父元素溢出隐藏：后续按钮所在的父区块设置了overflow: hidden，按钮超出父区块的部分会被裁剪，极端情况会导致按钮完全不可见
• 动态渲染逻辑问题：如果后续区块是JS动态生成的，按钮样式绑定时机早于区块渲染完成时间，也会出现按钮样式不生效无法显示的问题

• 修复定位逻辑：给每个滚动按钮的直接父级区块统一添加position: relative属性，保证每个按钮都相对于自身所在区块定位，避免全局偏移出可视区
• 替换ID为类名：所有滚动按钮统一使用类名（比如.scroll-down-btn）绑定样式，不要重复使用同一个ID，HTML规范要求ID在整个页面必须唯一
• 调整层级设置：给滚动按钮设置足够高的z-index值（比如z-index: 99），同时确认按钮父元素的z-index不会被其他页面区块覆盖
• 调整父元素溢出规则：如果父元素不需要保留overflow: hidden直接删除该属性即可；如果必须保留，调整按钮的定位坐标保证它完全处于父元素内部，或者将按钮移动到父元素外的同级位置
• 优化动态渲染绑定逻辑：如果区块是动态生成的，将按钮样式初始化逻辑放到区块渲染完成的回调函数中执行
• 修复点击事件绑定逻辑：如果后续按钮显示后点击无响应，将JS里的单元素选择逻辑改为遍历所有按钮绑定事件，参考代码如下：

// 错误写法，仅匹配第一个按钮
const btn = document.querySelector('.scroll-down-btn')
// 正确写法，绑定所有同类名按钮
document.querySelectorAll('.scroll-down-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const targetDom = document.querySelector(btn.dataset.target)
    targetDom.scrollIntoView({ behavior: 'smooth' })
  })
})

对应HTML按钮结构调整为：

<button class="scroll-down-btn" data-target="#section2">向下滚动</button>

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