CSS之层模型

一：理解

如果懂Photoshop的同事，那么层模型就像它的图层那样，上下图层互不影响，可以重叠组合出你想要的视觉。

或者可以理解为楼层，同一栋大厦的不同楼层，再二维角度说，大家的经纬度（页面元素的位置）可以任意调整。

二：使用
在前端编码中，层模型有三种形式出现：
1-绝对定位(position: absolute)
2-相对定位(position: relative)
3-固定定位(position: fixed)

绝对定位

脱离文档流的元素位置且不保留原位置（即自动分层了，类似photoshop的添加图层）。

如果没有参照物，它将按照浏览器的边界配合（right-top-bottom-left）css属性值调整你想要的元素定位。

参照物：绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的（默认是body）；

相对定位

脱离文档流的元素位置但是保留原元素占有的位置

固定定位

可以理解为相对于浏览器屏占位置固定在你要的地方，一般用于广告或者居中的登陆窗。

三：总结

绝对定位和相对定位都会对文档流造成相关的影响，为了影响最小，一般绝对定位配合相对定位使用。

即绝对定位absolute的元素父级节点要使用相对定位relative