Bootstrap中菜单链接失效问题求助

嘿，这个问题我太熟了！咱们先搞清楚为啥加了Bootstrap的container/row之后链接就失效了——罪魁祸首就是#somename上的z-index: -1。

问题根源 #

当元素设置z-index: -1且父元素没有设置非static定位时，这个元素会被放到页面最底层（甚至在body背景下面）。虽然视觉上你能看到链接，但鼠标点击的时候，实际是点在了上层的Bootstrap容器/行元素上，根本触不到#somename里的<a>标签。之前没加Bootstrap结构时，页面元素少，没有上层元素挡住它，所以链接能正常工作。

不用移除z-index的解决方案 #

咱们可以通过给父元素添加定位和z-index，把#somename的层级限制在父元素内部，这样既保留你的菜单样式，又能让链接恢复点击功能：

修改你的CSS，给#topheader加上这两行：

#topheader { 
  border: 1px solid #460a11; 
  border-radius: 4px; 
  background-color: #460a11; 
  padding: 10px 4px; 
  height: 50px;
  position: relative; /* 新增：让父元素成为定位上下文 */
  z-index: 1; /* 新增：确保父元素在页面正常层级 */
}

#somename的样式保持不变：

#somename { 
  border: 1px solid #600d17; 
  border-radius: 4px; 
  height: 200px; 
  background-color: #600d17; 
  position: relative; 
  z-index: -1; /* 保留这个，不影响样式 */
}

为什么这个方法有效？ #

z-index的层级是相对于最近的已定位父元素（position为relative/absolute/fixed/sticky）来计算的。给#topheader加上position: relative后，#somename的z-index: -1只会让它在#topheader内部处于下层，而整个#topheader在页面的正常层级，不会被其他Bootstrap元素覆盖，里面的链接自然就能被点击到了。

如果这个方案还不符合你的预期，你也可以试试把#somename的z-index改成0或者正数，然后调整其他元素的背景/边框样式来还原你想要的视觉效果——不过上面的方法应该是最贴合你需求的。

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