html - CSS 固定 header 仅在元素透明时才与元素重叠

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;
}

这是完整的 fiddle :http://jsfiddle.net/rkgy5zvz/

Answer 1

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

只需添加具有适当数字的 z-index 属性。这里是JSfiddle