position:relative/absolute, containing block, hasLayout...
In all the following cases:
- 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.
- The small box with red border has position:absolute.
- 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
- 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:
- 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