CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 内容div越过固定的导航栏大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个样式表,其目的是有一个固定的导航栏,无论你向下滚动多远,它都会保持在屏幕的顶部.为此,我刚刚使用了position:fixed; – 但是当我实际向下滚动时,#content div会覆盖它并直接越过顶部(因此导航栏位于页面顶部但位于内容div下方.)

多年来我没有做过任何严肃的CSS编码,所以我有点生疏 – 这可能是一个非常简单的解决方案,所以道歉是如此微不足道!

style.css文件

body {
    margin:0;
    BACkground:#eeeeee;
}

#navbar {
    BACkground-color:#990000;
    position:fixed;
    width:100%;
    height:50px;
    text-align:center;
    vertical-align:middle;
    line-height:50px;
    top:0px;
}

#navbar a {
    color:#fff;
}

#content {
    BACkground:#eeeeee;
    margin-top:50px;
    width:100%;
}

#feed {
    BACkground: #fff;
    position:absolute;
    left:22%;
    width:776px;
}

页面结构如下:

<body>
    <div id="navbar"><?php include core/navbar.php; ?></div>
    <div id="content">
        <div id="feed">
            CONTENT
        </div>
    </div>
</body>

解决方法

为了解决这个问题,您需要使用属性z-index defined by W3来指定元素的级别.试试这个:
#navbar {
  BACkground-color:#990000;
  position:fixed;  
  z-index:1; /*Add this*/
  width:100%;
  height:50px;
  text-align:center;
  vertical-align:middle;
  line-height:50px;
  top:0px;
}

大佬总结

以上是大佬教程为你收集整理的css – 内容div越过固定的导航栏全部内容,希望文章能够帮你解决css – 内容div越过固定的导航栏所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。