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

作者:没什么大不了 | 创建时间: 2023-05-01
把导航栏固定在底部,随浏览器一起移动;...
html如何把导航栏固定在底部随浏览器移动

操作方法

原理:通过CSS样式就可以完成 position:fixed; 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

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

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

div部分: <ul class="a1"> <li>首页</li> <li>列表页</li> <li>内容页</li> </ul>

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里面清除,这样不会影响布局;
点击展开全文

更多推荐