Question

所以我有一个带标题和导航栏的网站。我想要实现的效果是导航栏位于标题后面，然后滚动浏览标题时滑出。 Example

但是上面的示例中的链接无法点击（它们被标题覆盖），所以我重新设计了一下并获得了成功的结果。但是现在导航栏仍然位于标题的顶部。我尝试用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

发现问题：

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

我的坏人:)。

z-index不适用于固定div

2 个答案: