CSS---堆叠顺序---position---z-index

通常认为HTML页面是二维的，但实际上，CSS有一个 z-index 属性，允许层叠元素。

层叠的规则如下：

       在没有指定 z-index 属性的情况下，所有元素默认在0层渲染。当多个元素的 z-index 属性相同时，将按照以下顺序布局：

1. 普通流(无定位)里的块元素将按其在HTML中出现的顺序堆叠，即：后出现的元素叠放在先出现的元素的前面。
2. 定位元素也是按照其在HTML中出现的顺序堆叠
3. 当普通流里的块元素、浮动元素、定位元素叠放在了一起时，堆叠顺序为：普通元素 < 浮动元素 < 定位元素，即：浮动元素堆叠在普通元素和定位元素之间，定位元素放在最前面。

       在指定 z-index 属性的情况下（z-index属性仅在定位元素上定义时才有效），元素将一律按照 z-index 属性值的顺序叠放：z-index 属性值大的元素叠放在属性值小的元素的前面  ，z-index 值越小，表示距离观察者越远，相反 z-index 值越大，表示距离观察者越近。