html - 仅当元素透明时，CSS 固定标题才会被元素重叠

Question

我正在处理这个网站模板，但我一直遇到问题。我现在最大的问题是，当固定标题越过内容框时，半透明框与标题重叠，直到用户将鼠标悬停在框上并使其返回不透明度为 1。我不知道为什么这样做，我真的很想解决这个问题。任何帮助表示赞赏。

这是与我的内容框相关的片段：

#wrapper {
    width: 960px;
    margin: 0 auto;
    text-align: left;
    -o-transition: .25s;
    -ms-transition: .25s;
    -moz-transition: .25s;
    -webkit-transition: .25s;
    transition: .25s;
    opacity: 0.5;
}
#wrapper:hover {
    width: 960px;
    margin: 0 auto;
    text-align: left;
    opacity: 1;
}

这是完整的小提琴：http: //jsfiddle.net/rkgy5zvz/

Answer 1

 #nav {
    position: fixed;
    background-color: #222;
    opacity: 1;
    width: 100%;
    top: 0;
    z-index: 99999;
}

只需使用正确的数字添加 z-index 属性。这里是JSfiddle