z-index positioning

Question

I have two div's, nested, and want to have an image placed in front of the inner-div's content, so as to look like decoration around the edges (much of it is transparent.)

I thought using z-index and absolute positioning would do it, but it has not worked. My simple test is to use two nested div's each with a background image and try to control which one is in front by changing the z-index value. No joy - what am I doing wrong?

<style type="text/css">
        div
        {
            width: 300px;
            height: 300px;
            border: solid 1px black;
            background-repeat: no-repeat;
            background-position: 0px;
        }
</style>

<div style="background-image: url(coffee1.png); z-index: 3; position: absolute; left: 0px; top: 0px;">
</div>
<div style="background-image: url(coffee2.png); z-index: 1; position: absolute; left: 0px; top: 0px;">
</div>

Thanks,

Matt.

Answer 1

z-index don't work on "position:relative";

Write the same two divs but not nested, then put "position:absolute" to both.

To position them, set the top, left, right and bottom css properties.

Then you can use z-index to say what div will be displayed on top.

Answer 2

Your DIV does not have dimensions. It has a background image, not an IMG tag, so your DIV has no idea how big you want it to be.

position:relative should be on the outer item - this gives a point of reference to the inner item, saying that "I am the new (0,0)"

position:absolute should be on the inner item, it takes its reference point from the FIRST outer item that has "position:relative", otherwise it assumes the BODY is (0,0).