1. 认识定位
position:
值： fixed（固定定位）relative（相对定位）absolute（绝对定位）
left:
right:
top:
bottom:
值：px %
1. 固定定位 position: fixed;
固定定位，相对于窗口位置进行偏移，元素不会随着浏览器滚动而滚动，脱离文档流。
left: 100px 相对于窗口左边有100px
right: 100px 相对于窗口右边有100px
top: 100px 相对于窗口上边有100px
bottom: 100px 相对于窗口下边有100px
2. 相对定位 position: relative;
相对定位，相对于本来应该出现的位置进行偏移，不脱离文档流。比较鸡肋，所以一般不给偏移量，作为绝对定位的父级定位元素使用。
3. 绝对定位 position: absolute;
绝对定位，相对于最近的父级定位元素进行定位，如果没有父级定位元素，就相对于body进行定位,脱离了文档流。
4. 定位特征：
- 固定定位和绝对定位脱离文档流。
- 绝对定位的元素宽度不再是默认100%
- 无论什么类型的元素，只要固定、相对定位的元素就支持宽高
- 定位元素，支持margin，padding。但是同样的不支持margin:auto
- 只要没有给偏移量，元素会出现在原有应该出现的位置。
- 如果两个定位元素相遇了，会发生什么？(层级)
2. 层级
z-index: 数字（没有单位）
值越小，层级就越小，在下面，值越大层级越大，在上面，没有最小值，也没有最大值。
其实，没有给z-index的定位元素，就介于0-1之间。
注意：不能给小数点
3. 定位的技巧
绝对居中的方式：
方法1
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
方法2
原理:
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
通常写法:
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
