Css absolute position inside relative position, not overlapping

Question

I had problems trying to get my site to be a crossbrowser. in IE6, I have a container with relative positioning, and inside there is an absolute div that has a negative top and left, but instead of going to the top of the relative div, it looks 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 browsers im, using only static positioning for the container and absolute position for hello world div, and works fine, but in ie6 the absolute div was strange positioning, and no matter how top or left I gave it, it didnt move. so I thought about this for IE6, but have the problem described above.

Answer 1

The combination of position relative to the absolute position:

 #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 is wrong with Z-indexing ???

If you go over what this guy did here; http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

It should work well for you.