本章主要内容
定位介绍
static 定位
relative 定位
absolute 定位
fixed 定位
sticky 定位
一、position介绍
position属性适用于 任何元素；
二、默认定位（position:static ）
A、作用：
- 是元素定位于自然流中，上下左右的偏移对其无效（默认属性），回归本真；
B、特点：
- 忽略 top、bottom、 right、left或z-index的偏移
- 两个未浮动的相邻的元素如果都设置了外边距（margin）那么最终的外边距 = 两者中最大的
- 未浮动的块级元素如果设置了width与height，且static的左右定位都是auto，左右外边距会自动平分整个剩余宽度，元素自动水平居中；
三、相对定位（position:relative）
A、作用：
- 为子元素绝对定位（absolute）做了一个参照物；
B、特点：
- 可以使用top、bottom、left、right或者z-index进行相对于自己定位偏移；
- 相对定位的元素不会离开自然流
- 任何元素都可以设置relative，他的后代都可以相对于他进行绝对定位；
- z-index可以对堆叠的元素进行排序
四、绝对定位（position:absolute）
A、作用：
- 元素脱离自然流进行定位偏移；
B、特点：
- 使元素脱离自然流；
- 如果父及元素没有relative属性，那么会参照body进行定位；
- 元素设置了width与height，且四个方向定位偏移都为0，且同时设置了margin:auto则会居中；
- 元素没设置width与height， 且四个方向定位偏移都为0，则子元素会与relative的父元素重合；
五、固定（position:fixed）
A、作用：
- 与absolute很相似，fixed的参照物是视口，absolute参照物是relative；
B、特点：
- 固定在视口上，不随滚轮的滑动而改变位置；
六、磁贴（position:sticky）
A、作用：
- relative与fixed的完美结合，制造出吸附的效果；
B、特点：
- 产生偏移，位置还在自然流中；
- 参照物是有滚动的属性的父级元素，没有滚动属性则选视口；