|  首页  |  资讯  |  评测  |  活动  |  学院  |  访谈  |  专题  |  杂志  |  产服  |  
您现在的位置:硅谷网> 学院> 经验>

html如何把导航栏固定在底部随浏览器移动?

2019-04-15 15:14 作者:百度经验 来源:硅谷网综合 HV: 编辑:GuiGu 【搜索试试

导航栏固定在底部,随浏览器一起移动;

工具/原料

需要的CSS样式:position:fixed;z-index:999;left:0;right:0;bottom:0;

正常导航,

方法/步骤1:

原理:通过CSS样式就可以完成

position:fixed;

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

方法/步骤2:

用fixed的话,会出现优先级别较低,导致被其他div覆盖的情况,那么这里就需要用到z-index:999;来让他成为最高级别,不至于被覆盖,999只是个数字,可以随意更改,比其他的高就可以;

方法/步骤3:

定位:left:0;right:0;bottom:0;

这三个样式写好后,就可以固定在底部并居中了。不要写top:0;

方法/步骤4:

div部分:

首页

列表页

内容页

方法/步骤5:

CSS样式部分:

.a1{

margin: auto;

padding:0;

list-style: none;

font-size:14px;

width:1020px;

position:fixed;

z-index:999;

bottom:0px;

left:0;

right:0;

}

注意事项

样式要作用于,不要作用到 上面,会出现堆叠

z-index的数值不一定非得999,比其他大就可以;

样式添加浮动后,不要在div里面清除,这样不会影响布局;

【对“html如何把导航栏固定在底部随浏览器移动?”发布评论】

版权及免责声明:
① 本网站部分投稿来源于“网友”,涉及投资、理财、消费等内容,请亲们反复甄别,切勿轻信。本网站部分由赞助商提供的内容属于【广告】性质,仅供阅读,不构成具体实施建议,请谨慎对待。据此操作,风险自担。
② 内容来源注明“硅谷网”及其相关称谓的文字、图片和音视频,版权均属本网站所有,任何媒体、网站或个人需经本网站许可方可复制或转载,并在使用时必须注明来源【硅谷网】或对应来源,违者本网站将依法追究责任。
③ 注明来源为各大报纸、杂志、网站及其他媒体的文章,文章原作者享有著作权,本网站转载其他媒体稿件是为传播更多的信息,并不代表赞同其观点和对其真实性负责,本网站不承担此类稿件侵权行为的连带责任。
④ 本网站不对非自身发布内容的真实性、合法性、准确性作担保。若硅谷网因为自身和转载内容,涉及到侵权、违法等问题,请有关单位或个人速与本网站取得联系(联系电话:01057255600),我们将第一时间核实处理。
广告
相关
头条
新闻来源很重要?将近一半读者根本不关心它! 新闻来源很重要?将近一半读者根本不关心它!
在网络主页上发新闻的好日子早就过去了。今天的受众更愿意把超过一半的流量花在社交媒……
·新闻来源很重要?将近一半读者根本不关心它!
图文
如何把苹果iPhone手机的照片传到苹果Mac电脑?
如何把苹果iPhone手机的照片传到苹果Mac电
mcafee是什么软件好用吗?McAfee中文译名是什么?
mcafee是什么软件好用吗?McAfee中文译名是
自媒体账号如何申请?各个平台运营方法汇总!
自媒体账号如何申请?各个平台运营方法汇总
如何把苹果iPhone手机的照片传到苹果Mac电脑?
如何把苹果iPhone手机的照片传到苹果Mac电
最新
·巴西5G不排除华为是什么情况?为何巴西5G不排除华
·如何把苹果iPhone手机的照片传到苹果Mac电脑?
·硅谷有多大面积?美国硅谷有多大?面积多少?
·iframe怎么用?iframe标签属性iframe写法详解!
·mcafee是什么软件好用吗?McAfee中文译名是什么?
热点
·做客、作客、座客和坐客的意思和区别是什么?
·硅谷为什么叫硅谷?硅谷到底是什么意思呢?
·知道UV、VV,CV是什么?PV、UV、IP什么意思?
·自媒体账号如何申请?各个平台运营方法汇总!
·目前微信有什么bug?微信bug是什么意思啊?
旧闻
·百度新闻源:百度新闻源审核、被清理、解封办
·苹果电脑MAC系统登录远程桌面 如何能够实现?
·CAXA二维CAD教程:把图纸名默认为文件名
·从事游戏策划,工作中中最难的一点是什么?
·简易教程:如何将iPad mini快速升级到iOS 7 b
广告
硅谷影像
如何把苹果iPhone手机的照片传到苹果Mac电脑?
如何把苹果iPhone手机的照片传到苹果Mac电脑?
mcafee是什么软件好用吗?McAfee中文译名是什么?
mcafee是什么软件好用吗?McAfee中文译名是什么?
什么是域名纠错系统?怎么关闭域名纠错系统?
什么是域名纠错系统?怎么关闭域名纠错系统?
董事长属于高管吗?公司董事属于公司高管吗?
董事长属于高管吗?公司董事属于公司高管吗?
server服务:server服务自动停止关闭如何解决?
server服务:server服务自动停止关闭如何解决?
怎么关闭域名纠错系统?什么是域名纠错系统?
怎么关闭域名纠错系统?什么是域名纠错系统?
关于我们·About | 联系我们·contact | 加入我们·Join | 关注我们·Invest | Site Map | Tags | RSS Map
电脑版·PC版 移动版·MD版 网站热线:(+86)010-57255600
Copyright © 2007-2020 硅谷网. 版权所有. All Rights Reserved. <京ICP备12003855号-2>