CSS右侧导航栏被内容遮挡 z-index设置无效问题求助

根本错误点 #

• 所有设置在position: static（浏览器默认的元素定位值）上的z-index属性，都会被浏览器完全忽略，不参与层叠优先级计算。你当前的nav样式里没有配置任何定位属性，默认就是static状态，哪怕写了z-index: 1000也不会生效，元素层叠顺序完全按照文档流书写顺序判定，代码里写在后面的页面内容自然会把导航栏盖在下方。
• 把导航设置在页面右侧的悬浮布局，本身就需要配合定位规则实现，你给出的演示代码里完全缺失对应的定位配置，导航只是普通的文档流块级元素，从布局逻辑上就不可能压过后续的页面内容。

修复操作 #

只需要在nav的样式规则里补充非static的定位属性，之前写的z-index: 1000就会正常生效。如果需要导航固定悬浮在页面右侧、不随页面滚动偏移，在原有样式基础上补充3行规则即可：

nav{
    /* 新增以下3行配置 */
    position: fixed;
    right: 0;
    top: 0;

    /* 以下为你原有样式，保持不变 */
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: rgb(29, 183, 255);
    font-family: 'Poppins', sans-serif;
    box-shadow: 0px 10px 10px rgb(156, 156, 156);
    z-index: 1000;
}

后续排查注意事项 #

如果补完定位后z-index仍然没有达到预期效果，按顺序检查两点：

• 检查覆盖导航的页面内容元素：如果该元素同样设置了非static定位、且z-index值高于1000，会直接盖过导航，只需要调低对应内容的z-index，或者调高导航的z-index即可。
• 检查导航的父级元素是否创建了受限制的层叠上下文：如果父元素设置了低于1000的z-index、小于1的透明度、非默认的transform属性，会把导航的层级限制在父元素的层级范围内，哪怕导航设了1000的z-index，也无法和其他更高层级的元素比较优先级。

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