Position的属性和属性值及差别

Position的属性和属性值及差别

Position的四个属性 ：
1.relative：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。

2.absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

3.fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

4.static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

---

Position属性的差别
1.position: relative;不会脱离文档流，position: fixed;position: absolute;会脱离文档流
2.position: relative; 相对于自己在文档流中的初始位置偏移定位。
3.position: fixed; 相对于浏览器窗口定位。
4.position: absolute; 是相对于父级非position:static 浏览器定位。

如果没有任何一个父级元素是非position:static属性，则会相对于文档定位。
这里它的父级元素是包含爷爷级元素、祖爷爷级元素、祖宗十八代级元素的。任意一级都可以。
如果它的父级元素和爷爷级元素都是非position:static 属性，则，它会选择距离最近的父元素。