CSS中position属性详解

position的定位模型有五中，分别为static、relative、absolute、fixed、sticky。

同时，这五中定位模型可以被继承。既inherit。

操作的属性分别为top   left   right   bottom  z-index.

---

1.static   自然定位

作用：是元素定位于常规/自然流中

特点：

忽略top,bottom,left,right,z-index声明

相邻两个元素如果都设置了外边距，那么最终外边距=两者外边距中最大的

具有固定width和height值的元素，如果把左右外边距设置成为auto，则左右外边距会自动扩大占满剩余宽度。造成这个快水平居中的效果

---

2.relative  相对定位

作用：使元素称为可定位的祖先元素

特点：

可以使用 top,right,bottom,left,z-index进行相对定位----？相对于自己在常规流的位置

相对定位的元素不会离开常规流

任何元素都可以设置为relative，他的绝对定位的后代都可以相对于它进行绝对定位-------好用

可以是浮动元素发生偏移，并控制其堆叠顺序

---

3.absolute  绝对定位

作用：使元素脱离常规流

特点：

脱离常规流

设置尺寸要注意百分比比的是谁--------最近定位的祖先元素

lrtb（left,right,bottom,top）如果设置为0，它将对齐到最近定位祖先元素的各边-----形成一个居中的效果

lrtb若设置为auto它将恢复到常规流中

如果没有最近定位祖先元素，那他的祖先元素就是body

z-index可以控制堆叠顺序

---

3.fixed：固定定位

作用：跟绝对定位相似

特点：

跟absolute的区别？------相对于视口做绝对定位

固定定位的元素不会随着视口滚动而滚动

继承absolute特点

---

4.sticky----吸附定位（需要配合偏移量使用。eg:top=0;）

作用：relavtive+fixed的完美结合，制造出吸附效果

特点：

如果产生偏移，原位置还在常规流中保留

如果他的最近祖先元素有滚动，那么他的偏移标尺就是最近的祖先元素

如果最近祖先元素没有滚动，那么他的偏移标尺是视口

注意：各浏览器对于吸附定位的兼容性有所不同，可通过www.caniuse.com查看各浏览器对css属性的支持情况