绝对定位和相对定位使盒子脱离文档流，同时有了堆叠属性
今天在开发新页面的时候，遇到了一个有趣的小问题，查了一下资料基本是了解了原因。
问题大致如下：页面的header有一个沿升出来的背景A，考虑使用对header的绝对定位position：absolute，再加上bottom的负值直接解决。但是发现这么做后，在背景A上面的两块内容，B和C，B可以正常显示，C确不能。
**直接原因：**自己比较了B和C的区别，发现B因为内部有一个绝对定位，所以在最外层加了position：relative。正是因为这个样式，使之后覆盖在背景A上的内容，正常显示了。
思考：为什么加了position：relative的内容，可以覆盖在头部绝对定位的背景上面呢？
查找资料：
position:
** z-index:**
大致分析：
1 position默认是static，在文档常规流中。这个时候z-index是无效的。
2 当背景A使用position：absolute后，移出正常文档流，z-index虽然没有设置，但是默认值是z-inde: auto生效，这时候背景A会覆盖在正常文档流上方。
3 当组件B使用position：relative后，虽然在正常文档流保留了位置，但是z-index: auto也生效了，就有了堆叠层级，两个值相同，下层元素覆盖在了上层元素的上面，所以组件B就显示了出来。
4 当组件C没有使用position的时候，默认是position：static，在正常文档流中，就被绝对定位和相对定位的元素覆盖了。
