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

时间:2015-07-23 15:00:31

标签: html css position absolute relative

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

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

提前感谢您的帮助!

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

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

3 个答案:

答案 0 :(得分:2)

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

.navbar {
    z-index:1;
}

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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

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