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

【问题标题】：z-index between two absolutely positioned columns?两个绝对定位的列之间的z-index？
【发布时间】：2011-04-13 00:58:34
【问题描述】：

我有一个包含两个“绝对”定位的 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-index 可以相互关联吗？

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

【问题讨论】：

标签： html css positioning z-index

【解决方案1】：

没有。

在这些容器上放置 position:absolute 后，每个容器都会建立自己的“堆叠上下文”，并且其中的元素只会相对于彼此在 z 轴上定位。 TimKadlec.com -- Detailed Look at Stacking in CSS

对堆栈上下文有很好的解释

【讨论】：

【解决方案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 的回答

【讨论】：

谢谢，我最终做了类似这样的事情。问题在于，由于这些列是通过 wordpress 动态填充的，因此无法知道要分配的最高位置。我最终使用 php 从 wordpress 检索图像高度并自动计算每个图像的适当顶部高度。现在很好用，谢谢你的回答！（而且我以前从未见过 jsfiddle，这太棒了）

【解决方案3】：

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

【讨论】：