在导航栏前添加div后锚点标签失效无法点击问题咨询

问题原因 #

你遇到的是典型的元素层叠覆盖问题：添加banner后整体布局高度发生变化，原有层叠顺序被打破，导航栏的可点击区域被其他元素遮挡，因此锚点点击、hover效果都失效，移除banner后遮挡消失功能自然恢复。

修复方案 #

你可以依次添加以下CSS规则解决问题：

1. 强制导航栏处于最高层，避免被其他元素遮挡

.nav_bar {
  /* 原有属性保留，新增以下两行 */
  position: relative;
  z-index: 999;
}

2. 修正landing_page容器的定位，避免它脱离文档流覆盖顶部banner

.landing_page{
  /* 原有属性保留，新增以下一行 */
  position: relative;
}

3. 主动给导航锚点设置光标样式，避免默认样式被继承覆盖

.nav_items li a {
  cursor: pointer;
  /* 可按需补充锚点的颜色、下划线等样式规则，避免被父元素样式覆盖 */
}

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