Element inside DIV positioned beneath it

Question

I accidentally deleted my question about this.

I have the following HTML:

<div id="frame">
    <img src="sample.png" alt="" />
</div>

CSS:

#frame { position: relative; z-index: 2; }
#frame img { position: relative; z-index: 1; }

What I'm trying to do, is get the image's parent DIV to be positioned on top (it's a frame). It seems the CSS doesn't do it, but why? How can I make this work?

Answer 1

Give the parent div a set height and see what happens.

Answer 2

Children of elements will have a higher stacking order than their parents, naturally ( children of the html element must be visible on TOP of html, and so forth ).

You may be able to offset this natural behavior by setting a z-index of -1 on the img.

EDIT: Why can't you just enclose the other "content" and/or use another wrapper? Would be the ideal solution. Otherwise you're hacking and trying to go around natural stacking order behaviour, which is meant to be that way

<div id="parent">
    <div id="frame"></div>
    <div id="child"></div>
</div>

Edit #2: Guess I was right all along, z-index of -1 works as well: http://jsfiddle.net/yBH2G/1/

Answer 3

Why not put the "frame" and image inside a div itself.

#box img, #box #frame {
    position:relative;
}
#box #frame {
    z-index: 100;
}

<div id="box">
    <div id="frame"></div>
    <img src='image.jpg' />
</div>

Answer 4

You can achieve what you want (may not work in older browsers):

#frame { ... no special css (but background should be [semi-]transparent) ... }
#frame img { position: relative; z-index: -1; }

Note the negative z-index number. This is why some browsers have issues, but all modern browsers handle this just fine.

@Edit: Here's a test case that works in Firefox 3.6, IE8, Safari 4 (IE6 & 7 need to not have the containing element have position, that is, it must be position: static to get it to work);

<div style="border: 5px solid red; width: 190px; height: 190px; position: relative; zoom: 1; margin: 20px">Example Text
<div style="position: absolute; z-index: -1; width: 200px; height: 200px; background-color: blue; opacity: .7; top: -10px;"></div>
</div>