什么是文档流(Normal flow)
在学习CSS过程中，遇到了"文档流(Normal flow)"这个概念，当接触的时候一脸懵逼，什么是文档流？它跟布局、定位有什么关系？
通过查资料了解到，原来CSS布局的网页其实并不是我们平常所见的在一个二维平面上，它是“立体”的，通过设置z-index属性，能够控制各个组件的上下层级关系，z-index属性的数值越大离用户越近，反之离用户越远。默认情况下，所有页面元素均位于z-index:0这一层，这一层顺序排列的元素就构成了“文档流”。
CSS的定位机制类型
CSS中存在三种定位机制：文档流(Normal flow)，浮动(float)和绝对定位(absolute)。如果不特别设置，我们一般都是在文档流中进行布局。CSS允许我们用元素相对于其正常应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置来进行定位。
position 属性
static ：静态定位
所有元素框正常生成，并处在它们的默认位置。
relative ：相对定位
使用top，bottom，left和right属性，让元素框相对于默认的位置向某个指定方向偏移指定距离。
absolute ：绝对定位
元素框从文档流完全删除，处于独立的层级中。处于绝对定位的元素框不会影响页面上的其他元素，这对于设置网页的信息弹框非常重要。绝对定位的元素框是相对于离它 最近的 非static属性的 祖先元素框 而定位的。
fixed ：固定定位
元素框的表现类似于absolute，不过它的固定位置是相对于浏览器窗口的，而非最近的非static属性祖先元素框。
