上次【JS-实现导航栏悬停】说到，导航栏悬停的那个页面在工业管理学(工业工程)上运行的时候，会出导航栏不停的抖动问题。解决方法如下：将导航栏的定位方式由原来的绝对的改为固定的，也不知道为什么改为固定的，就不抖了。-_-|| 复制代码代码如下：分区。导航{宽度： 800 px高度： 40px背景：红色；margin: 4px自动0;top: 400pxleft: 0px位置：固定；} 为此，JS也得做相应的修改。因为固定的；不变的定位是根据浏览器的可视区进行定位的，所以原来给导航栏的定位都得改变。复制代码代码如下： //记录导航条原来在页面上的位置var naviga _ offsetTop=0；var naviga _ offsetLeft=0；//IE7不识别getElementsByClassName，为了兼容自定义一个函数my _ getElementsByClassName(class _ name){ var El=[]；//获取所有元素_ El=文档。getelementsbytagname(' * ')；//通过类名刷选for(var I=0；i _ el.lengthi ) { if (_el[i]).class NAmE==class _ NAmE){ El[El。长度]=_ El[I]；} }返回El；} //导航条，悬停在顶部function naviga _ stay _ top(){ var a _ navigation _ bar=[]；if(文档。getelementsbyclassname){//Chrome，FF a _ navigation _ bar=document。getelementsbyclassname('导航')；} else {//IE a _ navigation _ bar=my _ getElementsByClassName(' navigation ')；} var scroll top=文档。尸体。向上滚动| |文档。文档元素。滚动顶部；document.title=scrollTop//如果向下滚动的距离大于原来导航栏离顶部的距离//直接将导航栏固定到可视区顶部if(滚动顶部navigata _ offsetTop){ a _ navigation _ bar[0]。风格。top=0 ' px} else { //如果向下滚动的距离小原来导航栏离顶部的距离，则重新计算导航栏的位置a _ navigation _ bar[0]。风格。top=(naviga _ offsetTop-滚动顶部)“px”；} } //给导航条上四个选项卡，加上点击事件窗户。onload=function(){ var a _ tab=[]；if(文档。getelementsbyclassname){//Chrome，FF a _ tab=document。getelementsbyclassname(' tab ')；} else {//IE a _ tab=my _ getElementsByClassName(' tab ')；} var a _ contents=[]；if(文档。getelementsbyclassname){//Chrome，FF a _ contents=document。getelementsbyclassname(' content ')；} else {//IE a _ contents=my _ getElementsByClassName(' content ')；} //获取offsetLeft，即导航栏离左边框的距离var a _ main _ div=[]；if(文档。getelementsbyclassname){//Chrome，FF a _ main _ div=document。getelementsbyclassname(' main ')；} else {//IE a _ main _ div=my _ getElementsByClassName(' main ')；} naviga _ offsetLeft=a _ main _ div[0].offsetLefta _ tab[0].onclick=function(){ window。滚动到(0，a_contents[2]).offsetTop)；} a _ tab[1]。onclick=function(){ window。滚动到(0，a_contents[3]).offsetTop)；} a _ tab[2]。onclick=function(){ window。滚动到(0，a_contents[4]).offsetTop)；} a _ tab[3]。onclick=function(){ window。滚动到(0，a_contents[5]).offsetTop)；} //获取页面上，导航条到顶部的位置var a _ navigation _ bar=[]；if(文档。getelementsbyclassname){//Chrome，FF a _ navigation _ bar=document。getelementsbyclassname('导航')；} else {//IE a _ navigation _ bar=my _ getElementsByClassName(' navigation ')；} //获取偏移顶部导航条_偏移顶部=a _导航条[0].offsetTopa _ navigation _ bar[0]。风格。left=naviga _ offsetLeft ' px//给滚动条以及鼠标加上滚动事件if(窗口。attachevent)//IE { window。attachevent(' onmousewheel '，naviga _ stay _ top)；window.attachEvent('onscroll '，naviga _ stay _ top)；文件。attachevent(' on mousewheel '，naviga _ stay _ top)；文件。attachevent(' on croll '，naviga _ stay _ top)；} else {//Chrome，FF窗口。addeventlistener('鼠标滚轮'，naviga_stay_top，false)；窗户。addeventlistener(' scroll '，naviga_stay_top，false)；文件。addeventlistener('鼠标滚轮'，naviga_stay_top，false)；文件。addeventlistener(' scroll '，naviga_stay_top，false)；} } 在这个问题中，理解CSS DIV定位（相对、绝对、静态、固定)的区别很重要。

相对、绝对、静态、固定首先看每个属性值的定义：1。静态：默认值。在没有定位的情况下，元素出现在普通流中(忽略顶部、底部、左侧、右侧或z-index的声明)。2.相对：生成相对定位元素，并通过设置顶部、底部、左侧和右侧相对于它们的正常位置来定位它们。它可以通过z指数分级。3.绝对：生成一个绝对定位的元素，并相对于第一个父元素定位它，静态定位除外。元素的位置由“左”、“上”、“右”和“下”属性指定。它可以通过z指数分级。4.修复：生成绝对定位的元素，并相对于浏览器窗口定位它们。元素的位置由“左”、“上”、“右”和“下”属性指定。它可以通过z指数分级。静态和固定的定位方法都很好理解，这里不做分析。以下是对相对应用和绝对应用的分析：1 .相对的。定位为相对的元素不在正常的文本流中，但它在文本流中的位置仍然存在。图1:

1.黄色背景的图层定位为相对，红色边框区域为其在正常流程中的位置。上下左右定位后，从灰色背景层的位置可以看出其正常位置依然存在。绝对的。定位为绝对的图层与正常文本流分离，但与相对的区别在于它在正常流中的位置不存在。图2:

图2显示，在将黄色背景层定位为绝对后，会自动添加灰色背景层。3.相对和绝对的主要区别：第一，上述正常流中的位置是否存在。其次，相对定位的级别总是相对于它最近的父元素，不管父元素是如何定位的。图3:

在图3中，红色背景层是相对定位，其直接父元素的绿色背景层是默认的静态定位。红色背景层的位置是从绿色背景层的顶部和左侧开始的20个元素。如果红色背景层定位为绝对，情况如图4所示：。

从图4可以看出，红色背景层仍然定义了top:20px；left:20px然而，它的相对元素通过绝对或相对定位方法变成黄色背景层。因此，定位为绝对的图层总是相对于定义为绝对或相对的最近父图层，并且该父图层不一定是其直接父图层。如果在其父层中既没有定义绝对也没有定义相对，它将相对于主体定位，如图5所示：。

图5除了上、左、右、下的定位外，边距属性值的定义也符合上述规则。