定位(position)
1. static:
在标准流中，就算设置left,right,top,bottom也没有效果
2. relative
相对自己原来的位置移动
left:20px 自己左边距离20px，元素占据空间不变，周围的static元素不受影响。
应用：把图片一直居中展示：
先把装图片的div（.box）设置为overflow：hidden
然后：.box img{
positiion:relative;
left:-960px;(图片的一半宽度) /*图片向左移动img的一半*/ (或者transform:translate(-50%))
margin-left:50%; /*向右移动父元素（.box）的一半*/
}
3. fixed固定定位
元素脱离normal flow
可以通过left,right,top,bottom进行定位，定位参照对象是视口（viewPort）
当画布滚动是，固定不动
4. absolute绝对定位
元素脱离标准流
可以通过left,right,top,bottom进行定位，
定位参照对象是最邻近的定位祖先元素，如果找不到这样的祖先元素，参照对象是视口
定位元素：position的值不为staticd的元素即position的值为relative,absolute,fixed的元素
4.1 子绝父相
如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案是：
- 父元素设置为position:relative（让父元素成为定位元素，而且父元素不脱离标准流）
- 子元素设置position:absolute
- 简称为子绝父相
如上图，父元素“手机考拉”不应该脱离标准流，子元素二维码有最好采用绝对定位，则父元素使用相对定位
绝对定位技巧
1. 绝对定位元素：positon值为absolute或者fixed的元素
2. 对于绝对定位元素来说：
定位参照对象的宽度=left+right+margin-left+margin-right+绝对定位元素实际占用宽度（上下方向类似）
所以，子绝父相的情况下：
1.让完全占据父元素： 子元素设置left:0，right:0(margin-left,margin-right默认为0)的情况下，子元素水平占据父元素
2.让内容居中：当子元素设置了宽高，要使子元素水平居中，可以设置left:0;right:0;margin:0 auto;
absolute的left,right默认为auto,无法确定是否可以左右平分，而手动将left,right设为0，margin-left,margin-right设置为auto,它可以水平居中
5. position总结
6. 元素的层叠
都是定位元素：后来的元素在原来的元素上面
6.1 z-index
ps:
可以脱离标准流的方式：fixed,absolute,float
脱离标准流元素的特点：
1. 可以随意设置宽高
2. 宽高默认由内容决定:
3. 不再受标准流的影响
4. 不向父元素汇报宽高
5. display属性为block，但由于没有父元素，width,height为auto时不知道父元素宽高，看起来很像“inline-block”
来源：CSDN
作者：HZRun
链接：https://blog.csdn.net/HZRun/article/details/104668198