父亲1，z-index=1
孩子1，z-index=20
父亲2，z-index=auto(无)
孩子2,z-index=4

在每个堆叠上下文中，下列层按从后向前的顺序绘制：

  1. 元素的background和border生成的堆叠上下文
  2. 堆叠层级为负数的子级堆叠上下文（最负的优先）
  3. 流内的，非内联级，未定位的（non-positioned ）后代
  4. 未定位的浮动（元素）
  5. 流内的，内联级，未定位的后代，包括inline table和inline block
  6. 堆叠层级为0的子级堆叠上下文，以及堆叠层级为0的定位的后代
  7. 堆叠层级为正数的子级堆叠上下文（最小的优先）

下面是默认情况下的堆叠上下文 (优先级代表的绘制顺序,先绘制的，会被后绘制的覆盖）

如果修改父亲1的z-index = 5,则堆叠上下文改为: (优先级代表的绘制顺序,先绘制的，会被后绘制的覆盖）

z-index并不是简单的越大越靠前（靠近用户）
这个例子，DOM结构上可以看到，content这个div下面，有2个同级div，他们的z-index不一样。一个是有值，一个是auto
对于auto的div,并没有生成新的堆叠上下文，所以浏览器会继续查找他的孩子，发现孩子2有z-index,为他创建一个堆叠上下文(z=4)
因为孩子2的z-index > 父亲1的（因为他们在堆叠上下文中属于一个层级），所以孩子2会显示在前面。
如果想要孩子1显示在孩子2前面。无论怎么修改孩子1的z-index都是没有效果的，必须：
修改孩子1的父亲1.z-index > 4才可以