Html 固定导航栏落后于内容

我这里有一个固定导航栏

问题是，当您向下滚动时，如果您将鼠标悬停在导航栏后面的元素上，它会变成导航栏的顶部

很奇怪

有什么建议吗

CSS:

jsiddle:

添加此样式

.links{z-index:1}

---

新增

z指数：9至
nav


html，
身体{
保证金：0；
填充：0；
字体系列：“开放式Sans”，无衬线；
背景色：#fff；
}
.集装箱{
最大宽度：1200px；
保证金：0自动；
填充：0 20px；
}
导航{
背景色：#fff；
高度：40px；
位置：固定；
排名：0；
宽度：100%；
浮动：左；
z指数：9；
}
导航链接{
浮动：左；
字体大小：13px；
字号：600；
边缘顶部：10px；
}
导航链接a{
颜色：#000；
文字装饰：无；
右边距：10px；
过渡期：.15s；
}
导航链接a：悬停{
不透明度：0.6；
过渡期：.15s；
}
导航名称{
浮动：对；
边缘顶部：10px；
}
导航名称a{
颜色：#000；
文字装饰：无；
}
导航。命名一个h2{
字体大小：14px；
保证金：0；
}
.工作{
字号：0；
填充顶部：40px；
溢出：隐藏；
}
.工作img{
最大宽度：20%；
过渡期：.15s；
}
.工作图像：悬停{
不透明度：.8；
过渡期：.15s；
}

很好的方法，但如果我们将其设置为
nav
，那就太好了。也许他会用
位置添加一些其他元素：relative和问题将保持不变：）@TomWalsh非常欢迎，因为您是新来的，请看一下：）
.links{z-index:1}