Position定位详细总结

前言

position定位在css布局中扮演着重要的角色，相信大家都会使用position，但是是否真正的了解它呢？于是我花了一点时间对position常用的属性进行了总结。

利用position可以对元素进行定位，常用取值有4个：

画布和视口：

在绝大多数情况下，子元素的绝对定位都是相对于父元素进行定位的，虽然给父元素的position设置relative、absolute、fixed都可以，但是如果不希望父元素脱标，常用解决方案是：

绝对定位元素（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;
}
```
```
<div class="box">
  <div class="inner"></div>
</div>
```
- 运行结果：

给元素添加定位，可能会出现元素的层叠，层叠的顺序一般满足以下规律：

非父子关系。

元素类型	层叠顺序
都是非定位元素	在标准流中一般不存在层叠现象
1个是定位元素，1个是非定位元素	定位元素会层叠在非定位元素上
都是定位元素	默认后面的定位元素层叠在前面的定位元素上，使用css属性z-index来控制层叠顺序

z-index属性。
- z-index属性用来设置定位元素的层叠顺序**（仅对定位元素有效，非static）**，取值可以是正整数、负整数、0；
- 比较规则：
  - 如果是兄弟关系：z-index越大，层叠在越上面，z-index相等，写在后面的元素层叠在上面；
  - 如果不是兄弟关系：各自从元素本身以及祖先元素中，找出最邻近（兄弟关系）的2个定位元素进行比较，而且在2个定位元素必须有设置z-index的具体数值；

position取值	脱离标准流	定位元素	绝对定位元素	定位参照对象
static	否	否	否	没有
relative	否	是	否	元素自己原来的位置
absolute	是	是	是	最近一级拥有定位的祖先元素（如果找不到，就以视口为参照对象）
fixed	是	是	是	视口