介绍position之前需要先了解一个概念：包含块
定义：元素用来计算和定位的一个框 这个很好理解，比如我们平时写样式时所写的百分比，倍数或是em，都是要根据某一个东西进行计算从而得到准确的宽高大小。而position也一样，顾名思义，位置，是位置就有相对的概念，相对什么的位置呢？答案就是包含块。
常用且明确规定的包含块：
- 根元素：也就是初始的包含块，它的大小是屏幕可视窗口的大小
- 如果一个元素的position的值是
static或者relative，(注意这种情况下无法形成BFC)，那么它的包含块就是父级的content-box - 如果一个元素的position的值是
absolute，那么它的包含块就是距离自己最近的那个position的值为relative的元素的padding-box(这里我们可以想到border的妙用)：使用透明边框设置间距，不会影响定位 - 如果一个元素的position的值是
fixed,那么它的包含块就是初始包含块
知道了包含块的概念，我们就来了解一下position的取值：
- static（默认值，无定位）
- fixed
- 拥有无依赖固定定位（拥有相对性-相对包含块且不占据排版空间的特性）
- relative（relative的出现就是为了限制absolute，具有相对自身与无侵入的特性）
相对自身：relative的定位是以自身作为依据移动的(但是四个方向上的百分比值是相对于包含块进行计算的，计算好了之后相对于当前的位置移动。还有一点需要注意，当对立方向设置了值，不会像absolute一样使元素具有该方向上的流体特性，而是上下取上值，左右取左值)
无侵入：当relative进行定位偏移的时候，不会影响周边元素的布局
使用需注意：relative最小化影响原则尽量设置在需要absolute的最近的那个父元素上，避免出现在层级较深的祖先元素上
- absolute
- 当position的值设置为absolute时，同float一样，具有包裹性，收缩性，形成BFC等特性。不同的是，float的自适应性是根据自己的父元素，而absolute的自适应性是根据包含块
- 当
position:absolute与float:left|right一起出现在样式表里的时候，float失效- 当不设置四个方向上的值时拥有无依赖绝对定位，具有相对性与不占据空间的特性
- 与text-align的关系：由于absolute将元素进行了块状化，所以只对行内元素有效果的text-align是不能控制已经absolute的元素，如果我们肉眼看见了absolute元素中，text-align产生了效果，不妨考虑一下“幽灵空白节点”
- 与overflow的关系：当
overflow:hidden的子孙元素有超出范围的absolute，会出现剪裁效果。当overflow：scroll|auto的子孙元素有超出范围的absolute，不会出现滚动条- 与clip配合：
clip:rect(top,right,bottom,left),剪掉的位置依然在，只是视觉上被剪掉了，实际的空间和内容还是存在- 当absolute元素的对立方向同时发出定位时，则在对立方向上具有流体特性
- sticky基于用户滚动的位置来进行定位
- 在
position:relative与position:fixed之间切换。跨域特定阈值之前表现为相对定位，否则表现为固定定位。- 使用sticky的时候，一定需要设置一个阈值（top、bottom、left、right），才能使粘性定位生效
掌握好position的特性，可以帮助我们写出更准确优雅的样式
