CSS定位的四种类型：static | relative | absolute | fixed

文档流

文档流也被称为normal flow普通流，是元素在html中的排列方式。
block元素单独占一行垂直排列，inline元素在行内从左至右依次排列。

定位的四种类型

static 静态定位

静态定位是默认的定位方式。它遵循正常的文档流，并且占用文档空间。
当position:static时，属性top | right | bottom | left | z-index无效。

relative 相对定位

相对定位是根据源北在文档流中的位置进行偏移，原本的位置遵循正常的文档流，且原本的位置会占用文档空间，实际展现的元素可能会覆盖周围的其他元素。
为了定位移动的相对位置，可以使用属性 top | right | left | bottom。

absolute 绝对定位

使用绝对定位的元素脱离文档流，且不占据文本空间，元素只能根据祖先类元素进行定位，并且这个祖先类的position属性不能为static.
当设置元素A的position:absolute后，它会从父元素逐层往上寻找，直到找到第一个属性position!=static的元素，（最终到元素为止）

注意
relative和static最外层的定位原点为
而absolute最外层的定位远点为

和相差8px的边距

abdolute不生效

当使用absolute属性时，必须指定 top | bottom | left | right 属性中的至少一个，否则这四个属性采用默认值auto，这将会导致对象遵从正常的html布局，即relative。

对齐优先级

top > bottom
left > right

fixed 固定定位

固定定位以窗口为定位原点进行偏移定位，脱离了文档流，使用 top | bottom | left | right 属性确定偏移值。
注意，固定定位的元素不会根据滚动条的滚动而移动。