一般浏览网页时导航条一般都是固定在顶部的,但是使用position:fixed属性时,接下去网页中的内容就会从屏幕最顶部开始布局,这就不合常理了,那么如何解决这个问题呢?
1.网页界面内容
<body>
<div class=" driveProcedurebar">
<img src="../img/driveProcedurebar.png" class="img-responsive">//img-responsive是bootstrap里面定义的css样式,如需使用可以引入bootstrap的css样式
</div>
<div class="driveProcedure">
<img src="../img/driveProcedure.png" class="img-responsive">
</div>
</body>
2.样式
.driveProcedure{
position:absolute;//绝对布局,从父容器的最左点开始
top:6%;//设置距离,用百分比才能自适应不同的设备
}
.driveProcedurebar{
position:fixed;//将第一个div的内容固定在顶部
z-index:2;//设置第二层的div在下面,这样图片往上移动的时候才不会盖住顶部导航栏
}
如果觉得《网页导航条布局》对你有帮助,请点赞、收藏,并留下你的观点哦!