CODEWITHSUNDEEP
cssinternet-explorercss-position
Gmo
Gmo

Reputation: 151

css absolute position inside relative position not overlapping

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.

Upvotes: 6

Views: 3676

Answers (2)

Salman Arshad
Salman Arshad

Reputation: 272106

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:

jsfiddle-QBd8P-ie6.

Seems to work in IE6+, FF, Chrome.

Upvotes: 2

Reconix
Reconix

Reputation: 19

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.

Upvotes: 1

Related Questions