Question

I have some div. I need in two children there. The first should be at static position and under second.

alt text http://a.imageshack.us/img685/8185/imgpk.png

Orange rectangle should be positioned to the parent div and has static position (for example, top: 20px;). The second child (red rectangle) should be over all another divs.

I tried to make orange div absolute and use z-index to manipulate draw-queue. But it’s always at the top (or below all another, when z-index is negative)

Could you help me with this?

---

UPD

<div id="content">
      <div id="secondChild"></div>
</div>
<div id="firstChild"></div>

#content
{
    position: absolute;
    width: 100%;
}
#secondChild
{
    z-index: 9999;
}
#firstChild
{
    position: absolute;
    z-index: -1;
}

Answer 1

Z-index works withing rendering context, so in your case it needs to be applied to #content, not second child. Also, it should already overlap the way you need if the red div is after the orange div in the page flow.

Too bad you don’t give the full(er) source, with margins etc, so that I can try to reproduce this.