CSS设置导航栏覆盖其他元素时z-index不生效问题咨询

• 核心原因：#top-ribbon 未设置背景色，默认属性为透明。你已经正确给两个定位元素设置了层级关系：fixed定位的导航栏z-index为1，absolute定位的main区域z-index为-1，导航栏实际已经在最上层，只是因为透明导致下方文字透了过来，视觉上产生了z-index未生效的错觉。
• 次要问题1：导航栏设置了width: 10000px的极端宽度，不需要这么写，直接设置width: 100%就能占满整个视口宽度，还不会触发不必要的横向滚动条。
• 次要问题2：给#main设置z-index: -1属于不规范写法，可能导致后续main内的元素层级异常，只要给导航栏设置足够高的z-index即可，不需要给普通内容区域设置负层级。

CSS 部分 #

html {
    background-color: #2b2b3b;
    color: white;
}

#main {
    margin-top: 100px;
    margin-left: 20px;
    position: absolute;
}

#top-ribbon {
    box-shadow: 0px 10px 5px #202030;
    width: 100%;
    position: fixed;
    z-index: 999;
    height: 100px;
    background-color: #2b2b3b;
}

HTML 部分 #

<!DOCTYPE html>
<html lang="en">
    <body>
        <div id="top-ribbon">
        </div>
        <div id="main">
            a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q<br>r<br>s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>
            a<br>b<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br>j<br>k<br>l<br>m<br>n<br>o<br>p<br>q<br>r<br>s<br>t<br>u<br>v<br>w<br>x<br>y<br>z<br>
        </div>
    </body>
</html>

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