position:relative/absolute, containing block, hasLayout...

In all the following cases:

1. The box with black border and grid background has position:relative, some paddings and margins. It should act as a reference for the included absolutely positioned box, being its containing block [CSS2.1 10.1]. All cases are repeated twice: before with this box having hasLayout false, and then with hasLayout true.
2. The small box with red border has position:absolute.
3. Sometimes the absolutely positioned box has a non-positioned parent, with some horizontal margins (inside the relative box.) This has blue border when it is a non hasLayout parent, and green border when it is a hasLayout parent
4. The most external box (yellow border) has position:relative and hasLayout, it serves to separate the different test cases (and sometimes as a sort of reference for IE/Win when this is unable to use the correct containing block.)

ap left:0 top:0

the previous three cases, with hasLayout on the relative box

ap left:0 top:0 width:50%

the previous three cases, with hasLayout on the relative box

ap right:0 bottom:0

the previous three cases, with hasLayout on the relative box

Notes on the IE/Win behaviour:

• The positioning (left/right/top/bottom) of the ap box:
  • In IE6 is wrong when the containing block has no Layout. It is correct when the c.b. has Layout, except sometimes a 1px error in bottom and right (see IE6-/Win, 1px wrong right/bottom absolute position when the width/height of the padding box of the containing block is an odd number of pixels).
  • In IE5.5 it seems based on the nearest hasLayout ancestor (which may differ from the c.b.), and it is variously wrong when its ancestors up to (and including) the c.b. have no Layout.
  • It is correct in IE7+.
• A percentage width for the ap box:
  • In IE6 it is based of the width of the nearest ancestor. This may be non-positioned, so it may differ from the c.b.
  • In IE5.5 it is based on the width of the nearest hasLayout ancestor. Again this may differ from the c.b.
  • It is correct in IE7+.
  • According to CSS2.1 10.2 the width of the padding-box of the c.b. should be used (not the content-box.) IE7+ correctly uses this padding-box width, not so IE6.

CSS tests home