1. 脱离了文档流
网页中脱离文档流的元素有三种：
- root 根元素
- float 浮动元素
- absolute 绝对定位
- fixed 固定定位
脱离正常文档流后，元素及其内部元素大小、位置的改变，对周边元素没有影响。在做动画时，使用绝对定位，可以减少重排或者重绘，这样可以提高性能。
2. 定位的原点
相对定位是相对自身在正常文档流中位置的偏移，而绝对定位是相对其包含块（containing block）的偏移。这个包含块可以近似理解为其最近一个非 static 定位的祖先的 padding box 左上角。如果没有这样的祖先，那么会相对于 initial containing block 进行定位，也就是包含整个文档的矩形（不是HTML、也不是BODY）。看下面的例子，展示的视觉效果：
* {
margin: 0;
padding: 0;
}
html {
background-color: rgb(200, 228, 146);
border: 10px solid black;
}
.square {
height: 100px;
width: 100px;
position: absolute;
top: 0px;
background-color: blue;
}
.container {
margin-left: 200px;
position: relative;
border: 10px solid green;
height: 200px;
width: 200px;
}
<body>
<div class="square"></div>
<div class="container">
<div class="square"></div>
</div>
</body>
图中两个蓝色正方形是完全一样的。注意top: 0px，相对 .container 定位的蓝色方块没有覆盖到 border，而相对 initial containing block 的左边蓝色正方形覆盖到了 html 的边框。这说明 initial containing block 是包含 html 的，而不是由 html 元素生成的。
3. 新的 block formatting context
绝对定位元素会生成一个新的 BFC，它的外边距不会折叠，内部的浮动元素不会溢出来。
4. 层叠堆栈上下文（z-index）
绝对定位元素会生成一个层叠上下文，并且在当前层叠上下文中，默认不设值的情况下，它比正常流中的元素以及浮动元素拥有更高的层级，会覆盖到其他元素之上。
5. 绝对定位元素的 float 和 display 的变化
使用了绝对定位的元素，float 属性将无效，display 的变化如下表：
| 设定值 | 计算值 | |
|---|---|---|
| inline-table | table | |
| inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block | block | |
| 其他 | 与设定值一致 |
