兩個絕對定位的列之間的z-index？

我有兩個「絕對」定位的div的兩列布局。兩個絕對定位的列之間的z-index？

#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可以相互關聯嗎？

我已經分配的z-index爲圖像#left比#right高，但在#right圖像始終在最前面。我認爲這與#left首先出現在代碼中有關？

enter image description here

來源

2011-04-12 waffl

一個很好的解釋，如果它是一個選項的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的回答

來源

2011-04-12 16:58:34 MikeM

謝謝，我最終做了一些基本上這樣的事情。問題是，由於專欄是通過wordpress動態填充的，因此無法知道要分配什麼頂部位置。最後我用PHP來從WordPress的圖像高度，並自動計算出每個圖像的相應頂高。現在很好用，謝謝你的回答！（我以前從來沒有見過jsfiddle，那太棒了） – waffl 2011-04-13 16:21:19

只是一個想法：爲什麼不使用一個div每一個形象？我的意思是，每幅圖像格...

來源

2011-04-12 16:01:59 elvenbyte

號

一旦你穿上的位置是：絕對的那些容器，每個容器建立自己的「堆積語境」和元素之內只會是Z-位於相對於每其他。有堆疊上下文的TimKadlec.com -- Detailed Look at Stacking in CSS

來源

2011-04-12 16:31:23 Faust

兩個絕對定位的列之間的z-index？

回答

相關問題