(IE9)Remove floated or absolute positioned element will cause sibling element's scrollbar scroll back to top

Question

I was recently found a strange behavior in IE9(haven't tested under IE8): http://jsfiddle.net/qktfq/5/

Remove the yellow element(by clicking it) will cause the scrollbar in blue element scroll back to top. This behavior will happen only if yellow element is floated or absolute positioned.

This behavior is really annoying. Any help on how to avoid it will be a tremendous help! Thank you.

Answer 1

Got it! It's because of the positions. Try adding position:relative to the scrollable div (in this case, div.outer) and you will see that it works.

Better: You can wrap everything in a div with position:relative and it should do the trick.

Answer 2

After a little bit of research, i found out this behavior will only affect the elemnt that close to floated or position:absolute element. If i add another element between them, this behavior will gone. http://jsfiddle.net/qktfq/34/ But add an empty element only for this resaon seems odd...Orz...