On 2008-04-05, Gus Richter <gusrichter@netscape.net> wrote:
> dorayme wrote:
>>
>> There is a fairly fairly consistent rendering of the phenomenon you have
>> been wondering about, this is true. So some rules are being followed! I
>> find the the talk of the various contexts, stacking etc not easy to
>> negotiate - to be frank.
>
> The thing about stacking order for layers is that normally we say that
> elements must be positioned to overlap in order for any z-index to
> visually take effect.

Things can overlap quite easily without being positioned, especially
when overflow and overflow: visible are involved.

[...]
> Well, in the instance of a float we actually already have the float
> layered on top of the containing block with line boxes (which we've been
> calling div#shrink in our examples) and regarding this the spec
><http://www.w3.org/TR/CSS21/visuren.html#floats> has this to say:
>
> "The contents of floats are stacked as if floats generated new
> stacking contexts, except that any elements that actually create new
> stacking contexts take part in the float's parent's stacking context.
> 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 this
> happens, floats are rendered in front of non-positioned in-flow
> blocks, but behind in-flow inlines."

The common case of a float on top a box it would be underneath
(if it didn't get a higher stacking level) is this kind of thing:

<p>
blah blah
<span style="float: left; height: 500px; width: 200px"></span>
blah blah
</p>
<p>
blah blah blah
</p>

The float sticks out of the bottom of the first P, but is stacked on
top of the second P, even though the second P comes later in the
document. Assume P has a non-transparent background in this example.

I think that's the basic reason for giving floats a higher level than
normal flow blocks.

The inlines go on top of the float but usually they don't need to
because they flow around it.