Position定位详细总结
1.margin、padding定位
如果没有position，在标准流中，使用margin、padding对元素进行定位是比较常见的，其中margin还可以设置负数；
缺点：设置一个元素的margin或padding，通常会影响到标准流中其它元素的定位效果，不便于实现元素的层叠效果；
那么什么是标准流呢？可以参考下面这篇文章：
标准流以及脱标元素的特点
2.CSS定位属性-position
利用position可以对元素进行定位，常用取值有4个：
2.1.静态定位-static
static为position属性的默认值，在不设置position属性时就是static；
元素按照标准流进行排布；
对于static，设置left、right、top、bottom是没有任何效果的；
2.2.相对定位-relative
元素按照标准流进行排布；
定位参照对象是元素自己原来的位置，可以通过left、right、top、bottom来进行位置调整；
相对定位应用场景：在不影响其它元素位置的前提下，可以对当前元素位置进行微调；
2.3.绝对定位-absolute
元素脱离标准流（脱标）；
定位参照对象是最近一级拥有定位的祖先元素，可以通过left、right、top、bottom来进行位置调整；
如果一直往上层元素找不到有定位的元素，那么最终的参照对象为视口；
拥有定位的祖先元素：position的值不为static的元素；
2.4.固定定位-fixed
元素脱离标准流（脱标）；
定位参照对象是视口（viewport），可以通过left、right、top、bottom来进行位置调整；
当画布滚动时，元素的位置是固定不动的；
画布和视口：
画布：整个网页的大小；
视口：浏览器所能展示的区域；
一般情况下，画布 >= 视口；
3.绝对定位技巧
3.1.子绝父相
在绝大多数情况下，子元素的绝对定位都是相对于父元素进行定位的，虽然给父元素的position设置relative、absolute、fixed都可以，但是如果不希望父元素脱标，常用解决方案是：
父元素设置position: relative;（让父元素成为定位元素，又不脱离标准流）；
子元素设置position: absolute;；
3.2.绝对定位元素的公式应用
绝对定位元素（absolutely positioned element）：position值为absolute或者fixed的元素，因为absolute在没有找到祖先定位元素时，也是参考视口进行定位的，和fixed的效果一样。
对于绝对定位的元素，会满足以下两个公式：
定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素实际占用宽度；
定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素实际占用高度；
如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性，这也是为什么定位能够实现盒子的水平垂直居中。
left、right、top、bottom全部设置为0，margin设置为auto；
根据上面公式，margin + 绝对定位元素实际占用宽高 = 定位参照对象的宽高，盒子自然就水平垂直居中显示了
示例代码：
.box {
position: relative;
width: 500px;
height: 300px;
background-color: red;
}
.inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: blue;
}
运行结果：
4.定位元素的层叠现象
给元素添加定位，可能会出现元素的层叠，层叠的顺序一般满足以下规律：
父子关系：子元素会层叠在父元素上。
非父子关系。
元素类型
层叠顺序
都是非定位元素
在标准流中一般不存在层叠现象
1个是定位元素，1个是非定位元素
定位元素会层叠在非定位元素上
都是定位元素
默认后面的定位元素层叠在前面的定位元素上，使用css属性z-index来控制层叠顺序
z-index属性。
z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效，非static），取值可以是正整数、负整数、0；
比较规则：
如果是兄弟关系：z-index越大，层叠在越上面，z-index相等，写在后面的元素层叠在上面；
如果不是兄弟关系：各自从元素本身以及祖先元素中，找出最邻近（兄弟关系）的2个定位元素进行比较，而且在2个定位元素必须有设置z-index的具体数值；
5.position总结
position取值
脱离标准流
定位元素
绝对定位元素
定位参照对象
static
否
否
否
没有
relative
否
是
否
元素自己原来的位置
absolute
是
是
是
最近一级拥有定位的祖先元素（如果找不到，就以视口为参照对象）
fixed
是
是
是
视口