Stacking order on floats

This test tests the following statement from CSS2, section 9.5:

A float can overlap other boxes in the normal flow (e.g., when a normal flow box next to a float has negative margins). When an inline box overlaps with a float, the content, background, and borders of the inline box are rendered in front of the float. When a block box overlaps, the background and borders of the block box are rendered behind the float and are only be visible where the box is transparent. The content of the block box is rendered in front of the float.

Left float

These three words should have text and a colored background that overlap the left float, but the yellow background of this block should be behind the float.

Left float

These three words should have text and a colored background that overlap the left float, but the yellow background of this block should be behind the float.

These three words should

Left float

have text and a colored background that overlap the left float, but the yellow background of this block should be behind the float.

This page still needs tests equivalent to the first two, for right floats.

These fifteen words should

Right float

have text and a colored background that overlap the right float, but the yellow background of this block should be behind the float.

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org