CSS里的层次排列谜题：理解并运用z-index

层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。

z-index属性值并不是在任何元素上都有效果，z-index属性只能在定位元素有效果 。

在浏览器中关于层级，其实是有7阶层叠水平（Stacking Order）。

当元素设置了position属性后，这个定位元素的z-index就会自动生效，此时它的z-index值就是默认的auto，也就是0。