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?

meder omuraliev · Answer 1 · 2010-07-27T17:59:46.360

1

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/

edited Jul 27 '10 at 17:59

answered Jul 27 '10 at 05:57

meder omuraliev

183,342
71
393
434

I understand it's the ideal way, but I'd like to figure it out this way - rather than leave it unanswered, I will learn nothing new. – a79ce734e1 Jul 27 '10 at 06:23
I disagree with your mention of "buggy rendering engines" and agree with your crossed out text. Modern browsers (Firefox, IE8, Safari) all render a negative z-index below the containing element, and so does IE7 if the container is not itself positioned. – ScottS Jul 27 '10 at 17:39

score 0 · Answer 2 · answered Jul 27 '10 at 05:55

0

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

answered Jul 27 '10 at 05:55

hookedonwinter

12,436
19
61
74

It does in my original CSS, this is just minified sample code. – a79ce734e1 Jul 27 '10 at 05:56
Can you show us the full code? Try jsfiddle.com if you don't want to put it all here. – hookedonwinter Jul 27 '10 at 05:56

score 0 · Answer 3 · answered Jul 27 '10 at 08:40

0

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>

answered Jul 27 '10 at 08:40

dockeryZ

3,981
1
20
28

ScottS · Answer 4 · 2010-07-27T17:59:22.567

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>

Element inside DIV positioned beneath it

4 Answers4