If an absolutely positioned element has no given offset (e.g.
top: auto; left: auto), then the offsets are calculated with respect to the 'static position'.
(CSS2.1 10.3.7 Absolutely positioned, non-replaced elements)
... the term "static position" (of an element) refers, roughly, to the position an element would have had in the normal flow.
But in IE, when such an absolutely positioned element with auto-offset follows a float, the element is drawn alongside the float.
This is due to the layout-model of IE, which is incompatible to the basic CSS2.1 float concept. In IE, any element which "
haslayout = true" cannot interweave with floats, but the specification requires this:
(CSS2.1 9.5 Floats)
... non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for margin box of the float.
IE6 cannot meet this requirement, therefore, IE6 cannot calculate the correct static position of an absolutely positioned element that follows a float. The proprietary layout model says it has layout because of its
position: absolute, but the specification says its position shall be calculated as if it is static. In IE, static layout boxes that follow a float flow alongside the float without intersection.
The version of IE that meets the specification will have to drop the entire layout model.
<div class="ap_orange auto_offset"
IE6 screenshot. At least, the 3px text jog does not show up.
Since IE does not calculate the static position correctly, authors have to come off the straight path. By applying
position: relative to the parent, a containing block is established.
(CSS2.1 10.1 Definition of "containing block").
If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed'...
With explicit offsets like
left: 0; top: 0 with respect to this containing block, the rendering of the absolutely positioned child is the same in this case. Although any percentage width calculation will of course fail to match the desired design with auto offsets.
<div class="parent_blue rp_containing_block ">
<div class="ap_orange zero_offset"
created: January 6, 2006 Ingo Chao