Internet Explorer overflow bug

Internet Explorer - Bug Report

This bug relates to the handling of relatively positioned elements inside an overflow box.
Applies to:

* CSS
* (X)HTML
* IE6 and IE7

W3 states:

9.4.3 Relative positioning

Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1's offset is applied. This implies that relative positioning may cause boxes to overlap. However, if relative positioning causes an 'overflow:auto' box to have overflow, the UA must allow the user to access this content, which, through the creation of scrollbars, may affect layout.

Internet Explorer incorrectly overlays the relatively positioned element over all other elements on the page, giving it a "fixed" appearance when scrolling inside an overflow box.
The workaround

What's a bug report without a solution?

The simplest fix is to apply position: relative to the containing block; the one with overflow: auto.

http://www.rowanw.com/bugs/overflow_relative.htm