- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - TLTRBLBR - - - - - - - - - - - - - - - -

Absolutely positioned elements inside inline-level relative ones

In the above test case an inline element (span with gray background) has position:relative and contains 4 absolutely positioned spans, so (according to the specification) it is the ancestor that establish the containing block for them. The 4 absolute elements are positioned at the four "corners": top-left, top-right, bottom-right, bottom-left.

Just for visualization help the containing paragraph has a big font-size and the 4 absolute elements have colored borders on those sides where they should be "attached" to the c.b. edges (e.g. the one with left:0, top:0 has left and top colored borders.

If the browser window is resized the inline relative element wraps differently and is possible to check where the browsers position the 4 absolute elements.

The specification CSS 2.1 definition of "containing block" says the following about this case (assuming that 'direction' is 'ltr').

… the top and left of the containing block are the top and left padding edges of the first box generated by the ancestor, and the bottom and right are the bottom and right padding edges of the last box of the ancestor …

Note: This may cause the containing block's width to be negative.

Support for the above is not very good, except for the left and top positioning where all browsers agree. About right and bottom positioning:

  1. In Gecko 1.8+ they refer to the first line box of the relative ancestor (not to the last.)
  2. In Opera 9 and Safari 3 they correctly refer to the last inline box of the ancestor, but the right edge is never to the left of the left edge, in other words the containing block's width is never allowed to be negative. This should happen when the last inline box of the ancestor ends to the left of the beginning of the first one. In these conditions Opera and Safari consider the right edge of the c.b. to be equal to the left one.
  3. IE7 fully respect the specification.
  4. IE6- gets the right and bottom positioning wrong (this also happens with block-level relative ancestors, unless they have hasLayout.)

CSS tests home