Re: Do overlapping statically positioned elements "obscure" each other

On Thu, 16 Sep 1999 10:06:39 -0400, Ian Graham
(igraham@smaug.java.utoronto.ca) wrote:
> The question is: Given two subsequent block element, eg A followed by B.
> Both elements have content and background colors, and are statically
> positioned.  Margins are used so that B is "backed up" to overlap A.
> Should the background color of "B" obscure/hide the content of A? (I
> believe it should)
> 
> In other words, does the implicit stacking order always put background
> colors and images behind all element content, or is the implicit stacking
> order for siblings of the form
> 
>    B1 < C1 < B2 < C2 ...
> 
> where 1, 2, etc. refer to subsqent sibling elements and B, C refer to
> the element's background and 'content', and  B1 < C1 means "B1 is behind
> C1"?

Reading section 9.9 (although much of it only applies to positioned
elements) might give the impression that the box (background and
border) should be drawn on top of the inline content of the previous
box, since it says "Boxes with the same stack level in a stacking
context are stacked bottom-to-top according to document tree order." [1]

However, this must be wrong because of section 9.5, which says:

  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. [2]

Since a float can overlap multiple blocks (which could overlap each
other), and the inline content of both those blocks must be above the
float while the blocks themselves (background and border) must be
below the float.  This means that the markup:

<block1>
	<inline1/>
</block1>
<block2>
	<inline2/>
</block2>

Must yield the stacking order:

(BOTTOM) block1 < block2 < inline1 < inline2 (TOP, i.e., closest to user)

since if a float were present, the stacking order would be

(BOTTOM) block1 < block2 < float < inline1 < inline2 (TOP)

Note that the distinction between box and content is really a
distinction between block-level and inline-level elements.  A block
could have block-level content, in which case the block boxes (and,
later, their inline content) should probably be painted in "start-tag
order".

I wonder, though, if a block-level replaced element should be treated
more like an inline element in the above rules?

David

[1] http://www.w3.org/TR/REC-CSS2/visuren.html#q30
[2] http://www.w3.org/TR/REC-CSS2/visuren.html#floats

L. David Baron    Sophomore, Harvard (Physics)    dbaron@fas.harvard.edu
Links, SatPix, CSS, etc.     <URL: http://www.fas.harvard.edu/~dbaron/ >
WSP CSS AC                      <URL: http://www.webstandards.org/css/ >

Received on Thursday, 16 September 1999 10:27:32 UTC