导航栏固定在底部,随浏览器一起移动;
工具/原料
需要的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里面清除,这样不会影响布局;
|