初识css层叠上下文

css中有不少反人类直觉的东西，因此在学css的过程当中最大的乐趣不在于记住多少，而在于本身动手作实验，一步步颠覆你的直觉，初学css层叠上下文，作了一些简单的小实验一步步验证本身的想法。css

broder层级在background之上，把broder设置透明，可透过它看到background的颜色。
spa

内联元素层级在border之上。
code

无论是兄弟仍是儿子，块级元素的层级都是后来者居上，但内联元素始终在块级元素之上。
ip

块级元素的内联元素也是后来者居上，蓝色红点是青色背景的内联元素，覆盖了以前块级元素的内联元素。
rem

图中粉色边框黑色内联元素的是浮动元素，它的块级元素在全部块级元素之上，可是它的内联元素在全部内联元素之下。蓝色 > 黄色 > 黑色
it

下面一张图很好的展现了这些元素之间的层级关系。
io

灰色背景是浮动，和黑色背景是同级元素，层级应该是后来者居上（上图所示），可是在黑色背景上加position: relative，浮动元素就跑到他下面去了（下图所示）。

class

两兄弟元素被position: relative后且z-index:auto;，它们的子元素position:absolute后，它们之间的位置关系取决于z-index值的大小，谁大谁在上，若是两个值相等则后来者居上。cli

两个兄弟元素被position: relative定位后且z-index值不为auto，那么它们的子元素position:absolute后的位置关系和z-index的值没有关系，后来者居上。
im