css有很多反直觉的东西，所以学习css的过程中最大的乐趣不是记住了多少，而是自己动手做实验，一步步颠覆你的直觉，在初学者学习css级联的背景下，我做了一些简单的实验来一步步验证我的想法。broder层在背景之上，设置broder为透明，透过它可以看到背景的颜色。内联元素在边框上方分层。不管是兄弟还是儿子，块级元素的层次结构都是最后来的，但是内联元素永远在块级元素之上。块级元素的内联元素也是后来者。蓝点和红点是青色底色的内联元素，覆盖了前面块级元素的内联元素。图中带粉色边框的黑色内联元素是浮动元素，它的块级元素在所有块级元素之上，但是它的内联元素在所有内联元素之下。蓝色>黄色>黑色下图很好地显示了这些元素之间的层次关系。灰色背景是浮动的，和黑色背景是同一个level元素，level应该是后者（如上图），但是如果黑色背景加上position:relative，浮动元素就会往下走（如下图所示）。两个兄弟元素定位为：relative和z-index:auto;后，其子元素定位为：absolute，它们之间的位置关系取决于z-index值的大小，谁大谁在最上面，如果两个值相等，则后来者占上风。两个兄弟元素通过position:relative定位且z-index值不为auto后，则其子元素在position:absolute后的位置关系与z-index的值无关，以后者为准.
