你知道position吗？

一、属性：position、属性值为static、relative、absolute、fixed

二、什么是定位：所谓定位就是指设置了position属性的元素，可以相对于自己原有位置或祖先元素的位置或浏览器窗口做位移

三、定位的分类：

1.     position：static，静态定位

2.     position：relative，相对定位

3.     position：absolute，绝对定位

4.     position：fixed，固定定位

四、静态定位：元素的默认值，没有任何附加效果，了解

五、相对定位：所谓相对定位就是指元素相对于自身原有位置做位移，可以通过设置top/bottom/left/right四个值进而改变位移的方向和距离

1.     top：距离上端的距离

2.     bottom：距离下端的距离

3.     left：距离左端的距离

4.     right：距离右端的距离

六、相对定位的影响：相对定位的元素没有脱离标准流，不会对其它元素造成影响(移动后原有的位置还在)

七、绝对定位：绝对定位的元素在位移时的参照分为以下几种情况

1.     绝对定位的元素没有祖先元素，那么它位移的参照是浏览器窗口

2.     绝对定位的元素有祖先元素，但是祖先元素没有定位，那么此时它位移的参照是浏览器窗口

3.     绝对定位的元素有祖先元素，且祖先元素有定位，那么此时它位移的参照就是离它最近的且具有定位属性的祖先元素，注意通常祖先元素加相对定位，因为相对定位的元素没有脱离标准流，不会对整个页面造成影响

八、绝对定位的影响

1.     绝对定位的元素会脱离标准流，失去它在标准流中的原有位置，标准流中的元素会占据它的位置

2.     绝对定位的元素自动变成块元素

3.     绝对定位的元素会具有最小宽度

九、固定定位：所谓固定定位就是指元素始终以浏览器窗口做参照

1.     固定定位的元素会脱离标准流，失去它在标准流中的原有位置

2.     固定定位的元素会变成块元素

3.     固定定位的元素会具有最小宽度