js吸附置顶导航被下面的覆盖了怎么办

JavaScript017

js吸附置顶导航被下面的覆盖了怎么办,第1张

一般来讲实现导航栏指定是采用绝对定位的方式。示例代码如下:

<div class="nav">这里是导航所在的DIV容器。</div>

CSS代码:

.nav{

position:fixed/* 绝对定位,fixed是相对于浏览器窗口定位。 */

top:0/* 距离窗口顶部距离 */

left:0/* 距离窗口左边的距离 */

width:100%/* 宽度设置为100% */

height:40px/* 高度 */

z-index:99/* 层叠顺序,数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */

}

设置方式,原理及大致内容请看css代码注释

1、新建html文档。

2、书写hmtl代码<div class="box">    <!--代码开始--><div class="main"></div><div class="sub"><div class="sub01"></div><div class="sub01"></div><div class="fixed">我是固定的哟</div></div><!--代码结束--></div>。

3、书写css代码。<style type="text/css">**{padding:0pxmargin:0px}.box{width:1000px

background:#cccmargin:0 autooverflow:hidden}.main{width:770pxheight:3000px。

background:#000float:left}.sub{width:220pxbackground:#FC6float:right}.。

4、sub01{width:220pxheight:100pxbackground:#0CCmargin-bottom:10px}.fixed

{width:220pxheight:300pxbackground:#F66font:normal 13px/30px \5FAE\8F6F\96C5\

9ED1text-align:centertop:10px}</style>。

5、书写并添加js代码。<script src="js/jquery.js"></script>。这就完成了。