两个绝对定位的列之间的z-index？

Question

我有一个两列布局，有两个'绝对'定位div。

    #left {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    #right {
        position: absolute;
        top: 0;
        left: 0
        z-index: 0;
    }

在每一列中我都有图像，并希望它们能够在z-index的不同配置中相互重叠。使用wordpress，#left将填充一个类别的帖子，然后填充#right。

是否可以将 #left 中的图像放在 #right 中的图像上方，但不是全部？实质上 - 两个独立的div之间的z索引是否可以相对于彼此？

我为 #left 中的图像指定了z-index，高于 #right 的图像，但 #right 中的图像始终打开最佳。我认为这与#left在代码中首先出现的事实有关吗？

Answer 1

没有。

一旦你将position：absolute放在这些容器上，每个容器都建立了自己的“堆叠上下文”，其中的元素只相对于彼此z定位。在TimKadlec.com -- Detailed Look at Stacking in CSS

处堆叠上下文有一个很好的解释

Answer 2

如果div是position:relative的选项，那么类似的东西可以起作用

http://jsfiddle.net/pxfunc/ZRCke/

HTML：

<div id="left">
    <img id="l1" src="http://placehold.it/300x200/f00" />
    <img id="l2" src="http://placehold.it/80x150/f00" />
    <img id="l3" src="http://placehold.it/150x100/f00" />
</div>
<div id="right">
    <img id="r1" src="http://placehold.it/250/00f" />
    <img id="r2" src="http://placehold.it/250x150/00f" />
</div>

CSS：

#left {position: relative;width:50%;}
#right {position: relative;margin-left:50%;width:50%;}
div img {position: absolute;}

#l1 {top: 50px;right: -50px;z-index:10}
#l2 {top: 300px;right: -10px;z-index:30}
#l3 {top: 500px;right: 20px;z-index:50}

#r1 {top:100px;left:-20px;z-index:20}
#r2 {top:400px;left:-30px;z-index:40}

如果不是我必须使用@ SnakeFaust的回答

Answer 3

只是一个想法：为什么不为每个图像使用div？我的意思是，每张图片一个div ...