下面我们来看这样一段代码：
毫无疑问，由于div是块级元素它会独占一行所以显示出来是这样的
但是如果我们给div1的css加上display：absolute它会怎样显示呢？
是的黑色的div不见了，那他去哪了呢，通过开发者工具我们可以看到
div1和div2是在一起的只不过div1将div2覆盖住了，至于原因是什么我们首先要了解 position：absolute的用法：
将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框。
不要忘记使用left、right、top、bottom的配合定位具体位置。绝对定位如果不使用position:relative，而直接使用position:absolute绝对定位，
这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。
好了知道了这个，那要是我们想显示div2的颜色该怎么办呢？这就需要上面提的z-index属性了，要注意使用z-index前必须对元素进行position定位，否则是
看不出效果的，z-index类似与立体几何中的z轴，通过给z-index赋值，我们可以让我们想要显示的div显示在上层，z-index的值越大，那么他就越靠外层，
当然z-index也可以是负值，如果是负值他就会被这些正值死死压在下面不见天日了，
接下来我们开始设置z-index让他显示div2的颜色：代码如下
此处要知道，z-index的默认值为0，所以给div1的z-index设为-1，那么他就会被div2的默认值0压在下面。
显示结果如下：
最后要明白的一点是，z-index只能用来描述兄弟元素之间的显示优先级，对于父子关系来说（div里面嵌套div）z-index就失去了它的作用
因为它干不过父子之间的层级，无论怎样设置，都会默认显示儿子的颜色，代码如下：
我们把父亲元素的z-index设置为999，而儿子元素默认为0，但是显示的结果却依然是：
儿子元素的css，所以z-index对于父子间的感情也是无可奈何啊。。。。毕竟现在的父亲太宠爱自己的孩子了。。
原文：https://www.cnblogs.com/myw666/p/11326927.html