使用内容的相对和绝对后，将固定标题隐藏在内容后面

Question

我正在尝试实现一个标题，只要我滚动就会修复，所以我使用了position：fixed for it

但是当我尝试对内容使用相对和绝对时，标题会隐藏在内容（图像）后面

提前感谢您的帮助！

代码：https://goo.gl/O97XTG

全屏：https://goo.gl/Kwk7Uy

Answer 1

只需在导航中添加z-index即可。由于它出现在DOM中的内容之前，它将在z轴上显示在它下面。将其强制为高于0的z-index，如下所示：

.navbar {
    z-index:1;
}

Answer 2

您需要将导航的z索引设置为高于图像的z索引。如果它应该始终位于顶部，则将其设置为几千，例如

.navbar{
    width: 960px;
    height: 30px;
    background: rgba(0,155,209,0.8);
    position: fixed;
    z-index: 4000;
}

Answer 3

尝试使用z-index您可以在链接中查看它。

https://jsfiddle.net/gj9uyc2m/1/

.navbar{
    width: 960px;
    height: 30px;
    background: rgba(0,155,209,0.8);
    position: fixed;
    z-index:1;    
}