Position

Position属性四个值

1、static（静态定位）：

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index声明）。所有元素在默认的情况下position属性均为static

2、fixed（固定定位）：

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

3、relative（相对定位）：

生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。（如果值为负数，则直接换成整数；如果值为整数，则直接改变相对方向。）

4、absolute（绝对定位）：

1.当某个absolute定位元素的父元素具有position:relative/absolute/fixed时，定位元素都会依据父元素而定位，而父元素没有设置position属性或者设置了默认属性，那么定位属性会依据html元素来定位。
2.元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。
3.而且不论元素是行内元素还是块级元素，都会生成一个块级框，也就是例如行内元素span设置了absolute后就可以设置height和width属性

5.sticky

粘性定位可以被认为是相对定位（relative）和固定定位（fixed）的混合。元素在跨越特定阈值前为相对定位，之后为固定定位
参考学习：https://blog.csdn.net/hkwBest/article/details/87094619

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注意 ：
**- 1、**relative,定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在，relative：相对于本身偏移，没有脱离文档流。
-2. absolute定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在，相对于浏览器定位，脱离了文档流，也就是不占位置。

• relative和absolute结合使用时，可以不再参照浏览器定位，而参照父级元素定位，从而更加自由。

**2`**Note：使用static 定位或无position定位的元素z-index属性是无效的。
只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和固定定位。

总结：
1.static 正常文档流（会忽略z-index top bottom left right属性的设置）
2.fixed 脱离文档流（相对于浏览器窗口进行的定位）
3.relative 相对定位 不会脱离文档流 相对于自身的定位
（如果值为负数，则直接换成整数；如果值为整数，则直接改变相对方向。）
4.absolute 绝对定位 脱离文档流
5.sticky
6z-index 叠堆值的大小