初识css层叠上下文

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

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

内联元素层级在border之上。

不管是兄弟还是儿子，块级元素的层级都是后来者居上，但内联元素始终在块级元素之上。

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

图中粉色边框黑色内联元素的是浮动元素，它的块级元素在所有块级元素之上，但是它的内联元素在所有内联元素之下。蓝色 > 黄色 > 黑色

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

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

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

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