一、CSS定位布局
| 选项 | 说明 |
|---|---|
| static | 默认形为，属于文档流 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
1.relative
解释：元素在原来的位置开始移动(position:relative;left:20px;距离20px)，这种移动是左移右移上移下移多少长度（left:20px距离参照系左边距离20px；right:20px距离参照系右边距离20px；top:20px距离参照系顶部距离20px；bottom:20px距离参照系底部距离20px）
- 参照系：参照系是自己其原本的位置
特性：对象不可层叠、不脱离文档流
- 不脱离文档流：对比绝对定位（绝对定位会脱离文档流）
- 不可层叠：对比绝对定位（绝对定位可以多层叠在一起）
2.absolute
解释：元素以绝对位置开始移动（left:20px距离参照系左边距离20px；right:20px距离参照系右边距离20px；top:20px距离参照系顶部距离20px；bottom:20px距离参照系底部距离20px）
- 参照系：当父元素有relative属性或者absolute时，就以父元素为参照物；父元素无，向祖先辈开始寻找，直到某祖先有relative属性或者absolute，就以该祖先为参照物；如果祖先全无relative属性或者absolute，就以body为参照物；常常让父元素为相对定位子元素为绝对定位，称为子绝父相
特性：脱离文档流(意味着可以与普通文档元素重合)，行内块特性（与浮动元素一样，无论原本元素是怎样都是默认有display:inline-block;）
3.固定定位
解释：元素固定在页面某个位置，无论页面怎么滑动，它相对于屏幕永远固定于那里
注意：其有absolute的特征，只不过参照系是body，不会是其它（在设置left等等就会使用absolute的特征）；通过不设置left、right、bottom和top就能避免相对于body移动而是像普通元素一样布局
代码：position: fixed;
4.层级显示
代码：z-index:10;
解释：通过 z-index 控制元素的上下层级，数值越大越在上面即越先显示
前提：需要元素上写有position:relative;或position:absolute;
使用场景：
- 设置给兄弟元素，兄弟元素之间确定哪个先展示（父级子元素设置 z-index 没有意义，子元素永远在父元素上面的）
- 一个元素使用absolute或者relative遮盖到了普通元素（给普通元素设置position和z-index优先显示）
- 等等
5.总结
说明：尽量不要使用position来进行布局，因该用其来微调，而不是布局，其布局会造成父元素没有高度（这种问题只能给父元素设置高度来解决，其不同于浮动，无法消除影响），布局建议使用margin与flex
