CSS-合理使用z-index控制盒子视轴高度，解决z-index失效

写在前面，如果你只关心正文请跳过这部分。我关于css的博客很少，首先是没有什么写静态页面的需求，其次是css总是给我一种“不可控”的感觉。比如，我写过仿知乎首页的静态页面，当时完全不知道为什么这个块“跑掉了”，就不停测试给跑掉的块加各种样式，“杀手锏”就是absolute和z-index —— x轴、y轴位置不对我就调left、top值，z轴（视轴，或者说哪个块在上面，可以直接看到）不对我就调z-index。结果用chrome一看，全是无效样式，满屏绝对定位、999的z-index，过程中我也是痛苦不堪。最近有需求写几个静态页面，就沉下心认真看了看css，今天分享的部分是如何合理使用z-index。

关于z-index我们的共识

共识一

首先，我们都同意，z-index对于普通盒子是无效的，这里的“普通盒子”是除了下文我会提到的“神奇盒子”外的所有盒子，至于什么是“神奇盒子”请慢慢看。
对于普通盒子，不管z-index值如何，写在html文档中后面的块会在写在前面的盒子上面，float的盒子会在没有float的盒子上面，文字等inline、inline-block元素会在block元素的上面。

以下所有代码示例请查看github查看完整源码

    <div class="first">first div</div>
    <div class="second">second div</div>
    <div class="inline">inline div</div>
    <div class="float_first">first float div</div>
    <div class="float_second">second float div</div>

        div{
            width: 100px;
            height: 200px;
            border: 2px solid silver;
        }
        .first{
            background-color: blue;
        }
        .second{