定位

1相对定位

如果想为元素设置层模型中的相对定位，需要设置position:relative;，它还是会占用该元素在文档中初始的页面空间，

通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置，然后相对于以前的位置移动，

移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动

一般用于

1）微调元素

2）做绝对定位的参考，子绝父相

2 绝对定位

如果想为元素设置层模型中的绝对定位，需要设置position:absolute;，并且要对相对于谁定位的元素机上position：relative，作用将元素从文档流中拖出来,

将不占用原来元素的空间，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。

如果不存在就逐级向上排查，直到相对于body元素，即相对于浏览器窗口。如果父元素和祖先元素都设置了position：relative，则它会根据就近原则 相对于父元素进行定位

3 固定定位

固定定位

如果想为元素设置层模型中的固定定位，需要设置position:fixed;，直接以浏览器窗口作为参考进行定位，它是浮动在页面中，元素位置不会随浏览器窗口的滚动条滚动而变化，

除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。

一般用于

1）网页右下角的“返回到顶部”

2）顶部导航条

3)边栏的广告