更改z-index值后.navigation类链接失效问题求助

嘿，这个问题我太熟了——你遇到的是典型的z-index层级覆盖问题！当你调整.cover-profile的z-index后，它大概率跑到了固定导航栏.navigation的上层，相当于把导航栏给“盖住”了，所以链接自然没法被点击。结合你要实现“滚动时其他内容在导航栏下方”的需求，给你几个具体的解决思路：

1. 给导航栏设置更高优先级的z-index #

直接给.navigation设置一个比.cover-profile更大的z-index值，比如：

.navigation {
  position: fixed;
  top: 0;
  z-index: 999; /* 这个值只要比.cover-profile的z-index大就行，999是常用的高优先级值 */
}

.cover-profile {
  z-index: 100; /* 确保这个数值小于导航栏的z-index */
}

这样导航栏就会始终“浮”在所有内容的上层，不会被其他元素遮挡，链接也能正常点击了。

2. 确认元素的定位属性是否正确 #

要注意z-index只对设置了非static定位的元素生效（比如fixed、absolute、relative）。你的.navigation已经设置了position: fixed，满足条件，但如果.cover-profile的定位是static，那调整它的z-index其实没用——这种情况得先给.cover-profile加上position: relative或absolute，再调整z-index。

3. 排查父元素的堆叠上下文影响 #

有时候父元素的z-index会限制子元素的层级（也就是所谓的“堆叠上下文”）。如果.navigation的父元素设置了较低的z-index，哪怕你给.navigation设再高的z-index也没用。这种情况需要检查导航栏父元素的样式，确保它所在的堆叠上下文层级足够高。

另外，如果你希望滚动时内容不被导航栏挡住，别忘了给页面主体内容加个margin-top，值等于导航栏的高度：

body {
  margin-top: 60px; /* 假设你的导航栏高度是60px，根据实际情况调整 */
}

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