css absolute position inside relative position not overlapping

Question

I've been having problems trying to get my website to be crossbrowser.. in IE6 I have a container with relative positioning, and inside there is a absolute div, which has negative top and left, but instead of going on top of the relative div, is going underneath looking like this:

        ++++++++++++++++++++++
        +     container      +
        +++++++++++++er      +
        +llo        +er      +
        +rld        +er      +
        +++++++++++++er      +
        +     container      +
        +     container      +
        ++++++++++++++++++++++

insted of:

        ++++++++++++++++++++++
        +     container      +
  +++++++++++++++++++er      +
  +     hello       +er      +
  +     world       +er      +
  +++++++++++++++++++er      +
        +     container      +
        +     container      +
        ++++++++++++++++++++++

in all other browser im using just static positioning for container and absolute position for the hello world div, and is working just fine, but in ie6 the absolute div was weird positioning and no matter how top or left i gave it it didnt move, so I thought about doing this for IE6, but im having the problem describe above.

Answer 1

A combination of position relative with position absolute:

#container
{
    width: 200px;
    margin: 0 auto;
    position: relative;
}
#content
{
    width: 200px;
    position: absolute;
    z-index: 999;
    left: -100px;
    top: 100px;
}

Demo here and screenshot below:

.

Seems to work in IE6+, FF, Chrome.

Answer 2

What's wrong with Z-Indexing ???

If you go along the lines of what this guy has done here; http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

it should work fine for you.