z-index between two absolutely positioned columns?

I have a two-column layout with two 'absolute' positioned divs.

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

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

In each column I have images and would like them to be able to overlap one another in differing 开发者_StackOverflow中文版configurations with z-index. Using wordpress, #left is populated with posts from one category then subsequently, #right is populated.

Is it possible for an image from #left to be positioned above an image in #right but not all? In essence - can the z-indexes between two separate divs be relative to one another?

I have assigned z-index for images in #left higher than that of #right, but images in #right are always on top. I assume it is something to do with the fact that #left appears first in the code?

---

No.

Once you put position:absolute on those containers, each establishes its own "stacking context" and elements within will only be z-positioned relative to each other. There's a good explanation of stacking contexts at TimKadlec.com -- Detailed Look at Stacking in CSS

---

if it's an option for the divs to be position:relative then something like this could work

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}

if not I'd have to go with @SnakeFaust's answer

---

Just an idea: why don't you use a div for every image? I mean, one div per image...