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

 时间:2026-02-15 16:03:02

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部分:

<ul class="a1">

<li>首页</li>

<li>列表页</li>

<li>内容页</li>

</ul>

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;

}

  • CSS中,当鼠标移到层上,层怎么显示出边框?
  • ps结构样式方法如何设置为平滑
  • Bandicam如何设置自动完成录制和窗口置顶
  • wpsPPT中如何制作金属字体
  • HBuilderX设置transform修改界面元素步骤
  • 热门搜索
    关于清明节的手抄报 心理健康手抄报图片 感恩老师手抄报 关于法律的手抄报 中秋节手抄报内容 预防病毒手抄报 名人名言手抄报 扶贫手抄报 关于元旦的手抄报 汉字手抄报图片