absolute元素的z-index设置为0挡住页面的元素？

Question

一个页面头部 底部 中间 都有不同的背景，把他们的z-index值设为0，让他们不要挡住页面的内容。

.responsive-bg{
    background: url(../images/bg-center.png) repeat-y;
    position: relative;
    height: 100%;
    z-index: 0;
    padding-bottom: 249px;
    width: 100%;
}
.responsive-bg:before {
    content: "";
    height: 79px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url(../images/bg-top.png) no-repeat;
    z-index: 0;
}
.responsive-bg:after {
    content: "";
    position: absolute;
    height: 342px;
    background: url(../images/bg-car.png) no-repeat;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
}

wrap-tab中的元素还是被z-index为0的元素给挡住了，难道z-index为0 比 普通元素的堆叠顺序高？
如果我把.responsive-bg的relative的z-index设置成-1，就无法显示了？
我该如何让设置的背景不挡住元素？

Answer 1

差别就在于，z-index:0所在的<div>元素是层叠上下文元素，而z-index:auto所在的<div>元素是一个普通的元素，于是，里面的两个<img>妹子的层叠比较就不受父级的影响，两者直接套用层叠黄金准则，这里，两者有着明显不一的z-index值，因此，遵循“谁大谁上”的准则，于是，z-index为2的那个横妹子，就趴在了z-index为1的竖妹子身上。

而z-index一旦变成数值，哪怕是0，都会创建一个层叠上下文。此时，层叠规则就发生了变化。层叠上下文的特性里面最后一条——自成体系。两个<img>妹子的层叠顺序比较变成了优先比较其父级层叠上下文元素的层叠顺序。这里，由于两者都是z-index:0，层叠顺序这一块两者一样大，此时，遵循层叠黄金准则的另外一个准则“后来居上”，根据在DOM流中的位置决定谁在上面，于是，位于后面的竖着的妹子就自然而然趴在了横着的妹子身上。对，没错，<img>元素上的z-index打酱油了！

可以通过修改wrap-tab的层叠上下文实现，demo是修改wrap-tab的position来实现
https://jsfiddle.net/ycloud/2...

下面文章介绍了多种修改层叠上下文的方式
http://www.zhangxinxu.com/wor...