z-index 无法固定 div

Question

所以我有一个带有 header 和导航栏的网站。我试图达到的效果是导航栏位于 header 后面，然后在滚动经过 header 时滑出。 Example

但是在上面的例子中链接是不可点击的（它们被 header 覆盖了），所以我重新设计了一下并得到了成功的结果。但现在导航栏位于 header 之上。我尝试通过 z-index 更改它，但没有成功，我不知道哪里出了问题.. Example 2

（链接为服务器存档，不会更改。）

真诚的，一个困惑的开发者。

Answer 1

更改了第一个示例中的代码，现在可以正常工作了：

#Nav {
position: fixed;
background-color: #F0F4C3;
width: 100%;
background-size: 100% auto;
background-position: right center;
background-repeat: no-repeat;
top: 0px;
z-index: 10000;
box-shadow: 0px 4px 0px #AFB42B;
height: 50px;
margin-left: -8px;}
#Pic {
    height: 300px;
    /*changed*/
    z-index: 100001;
    margin-left: -8px;
    margin-right: -8px;
    margin-top: -8px;
    /*added*/
    position: relative;
}

您必须将 position:relative 添加到使用 z-index 的元素中，使 z-index 起作用

Answer 2

发现问题：

在 css 中将 position: 添加到 #headimage。

我的坏人:).

z-index 无法固定 div

z-index not working on fixed div

css

html

fixed