この HTML は、IE8 では正しく表示されません。Firefox、Opera、IE7、IE9、IE10 で動作します。(もちろん、固定位置要素に関係するため、IE6 でも機能しません。)
実際、Chrome ではまた別のことを行います。
私が思いつくことができる最も狭いテストケースは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
div {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div style="background-color: red; position: relative; top: 50px; left: 50px; float: left;">
<div style="background-color: blue; position: relative; top: 200px; left: 200px;">
<div style="background-color: green; position: fixed; top: 0;">
</div>
</div>
</div>
</body>
</html>
IE8 では、最も内側の div (緑の div) は、祖父母の div (赤の div) の 50 ピクセルの左インデントを何らかの形で無視し、直接の親 (青の div) でさえも考慮します。奇妙なバグ!
これは、div がこのように二重にネストされている場合にのみ発生し、祖父母がフローティングされている場合にのみ発生します。フロートを削除すると、問題なくレンダリングされます。(ただし、フローティングする必要があるため、回避策ではありません。)
編集
最初はこれを Chrome でテストしたと思っていましたが、実際には Chrome はまったく別のことを行います。
どのブラウザが実際に正しいかはわかりません。