定位属性
属性名：position
属性值：relative 相对定位、absolute 绝对定位、fixed 固定定位
作用：设置定位的元素，他需要根据某个参考元素发生位置的偏移
相对定位
参考元素：标签加载的原始位置
必须搭配偏移量属性才能发生移动
性质：相对定位的元素不脱离标签的原始状态（标准流、浮动），不会让出来原来占有的位置
- 实际应用
绝对定位
属性值：absolute
参考元素：参考的是距离最近的有定位的祖先元素，如果祖先元素都没有定位参考body。
body为参考元素的参考点
- 如果有top参与定位，参考点就是body页面的做上顶点和右上顶点，自身的对比点是盒子所有盒模型属性最外面的左上角或右上角
- 如果有bottom参与绝对定位，参考点是body页面首屏的左下顶点或右下顶点，对比点是盒子所有盒模型属性最外面的左下角或右下角
祖先元素参考点
如果绝对定位的参考元素是某个祖先级，参考点是盒子border以内的四个顶点，组合方向决定了参考点，绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的padding区域。
固定定位
属性值：fixed
参考元素：浏览器窗口
参考点：浏览器窗口的四个顶点
由于浏览器窗口的四个顶点位置不发生变化，会导致固定定位的元素显示在定位位置。
压盖效果
所有的定位类型都可以实现压盖效果
由于绝对定位的元素脱标，不占标准流的位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作的压盖
居中
定位的元素。如果想在参考元素居中显示，有自己的居中方法
- 在居中的方向使用一个偏移量属性，例如left，设置属性值为50%，导致图片的左顶点移动到参考元素的中心位置，百分比形式的属性值，百分百参考的是参考元素的border以内的宽度高度。
- 给绝对定位的子盒子设置一个同方向的margin，例如margin-left，属性值为负的自身宽度的一半
压盖顺序
- 默认压盖顺序
定位的元素不区分定位类型，都会去压盖标准流或浮动的元素
如果都是定位的元素，在HTML中后写的定位压盖先写的定位
因此。书写代码时，需要注意压盖效果，必须合理设置HTML元素的书写顺序
- 自定义压盖顺序
如果想更改压盖顺序，可以设置z-index属性
