CSS:关于定位

什么是文档流(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属性祖先元素框。

float --todo