CSS:z-index与background

在运用相对定位（position:relative）和绝对定位（position:absolute）的时候，有时会用到z-index属性

z-index

z-index 属性设置元素的堆叠顺序。

1. 每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定（每个元素仅属于一个层叠上下文）。
2. 同一个层叠上下文中，层叠级别大的显示在上面，反之显示在下面。
3. 同一个层叠上下文中，层叠级别相同的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。
4. 不同层叠上下文中，元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。

元素可拥有负的 z-index 属性值。
这个负的z-index值就很有趣了。
先上结论：七阶层叠理论

以上大部分都是平时用过的属性，这里重点思考一下z-index为负值时和background的关系

起初看到第一种情况我没明白过来，然后回顾了一下定位的概念才回过神来：
position:absolute会沿着父级元素往上找含有position属性的元素进行定位，如果没有回一直找到根元素，div1没设置position所以对比有误

给div1设置定位之后如下图

发现z-index不能跨级比较，尝试几遍之后发现：
无论内部的子元素z-index有多大，都会处在父级元素中z-index较大的元素的底层
这和我想比较的z-index与background不是一个概念

突然想起background-image和background-position

然后发现与z-index没什么联系
不过实践了很多代码之后觉得，应该是：
如同一个div盒子——background-color层上面一个background-image层再上面一个background-content层

虽然暂时没有找到代码方法验证z-index为负值时与background的关系，但是通过background层关系类比， 再对比层叠理论的结论，还是有点纠结，暂时想不到办法
只能说如果写一个网页是在纸上画画，那background是纸，其他的是内容，层叠关系造成了层叠效果，z-index为负值时在其他层叠级数的下面