CSS布局，定位

文档流

所有文档流就是按照元素的顺序，从左到右，由上而下的方式排列

定位

默认的文档流很多时候不能满足我们的布局需求，需要更丰富的布局手段

这时候我们需要定位。定位分为：relative、absolute、fixed、static。

Static 静态定位（默认）

无定位，元素正常出现了流中，不受left、right、top、bottom属性的影响

relative相对定位

相对定位是从原有的位置根据left、top进行位移，而且不影响后续元素的位置。

absolute绝对定位

父相子绝：孩子绝对定位 父亲设置相对定位 否则会一直往上找

fixed固定定位

固定定位脱离文档流，并相对窗口进行偏移

z-index

重新定位之后可能出现重叠，我们可以通过z-index调整其顺序，z-index默认值为auto

即与父元素相同，可能设置数值，数值大的层位相对于小的上方。

定位总结

1. 标准的文档流按照从左到右，自上而下的方式依次排列元素。若要改变默认布局则需使用定位：relative absolute fixed 等定位方式
2. Relative是相对于其原有位置进行偏移
3. Absolute是相对于父容器进行偏移，注意父容器必须是有定位的，即非默认（static）的定位方式，否则会一直往上追溯，直到页面。
4. Fixed定位是相对于整个页面进行偏移
5. Relative不会从标准流中脱离，而absolute和fixed都从标准中脱离出来。