position:relative and overflow:auto problem but cannot use position:relative on containing element !! :-(

Question

Hello

I have a page where I need to use overflow:auto inside html and body tags because I have a position : fixed element, for which I have to use position : absolute in IE (and thus, overflow:auto to get rid of the IE bug).

This bit is sorted.

But now my problem is I have other position: relative elements on my page. And the moment I put *html, body{ overflow : auto;} those relatively positioned elements behave strangely and kinda get fixed in IE due to another IE bug (the overflow:auto and position:relative one).

The workaround for this bug in a general case I am told is to include position:relative in the "containing element". But that is not possible since my containing element needs a position:absolute in IE to make the fixed element work.

How do I go about solving this?

---

* html , body { height:100%; overflow : auto;}
* body #fixedelement {position:absolute;} /* for IE */

body > #fixedelement {position:fixed;} /*for firefox etc*/

#relative{
    /* I need to use this but putting position:relative to html or body
    seems not possible coz i need #fixedelement to work in IE */
    position:relative;
}

Please help

Answer 1

There is a trick for it, which allows you to put absolute-positioned elements inside a relative element. You may find it useful.