Floating divs: overlapping fields, but content on the second box is still discarded

Question

I have the following HTML:

<div id = "container"> <div class="block pink float"></div> <div class="green block">A</div> </div> 

and the following CSS:

  .block { width: 200px; height: 200px; } .float { float: left; } .pink { background: #ee3e64; } .green { background: green; } 

What I see in the output is that the green box is hidden under the pink one? Why is this so? And why is A not displayed inside the Green field?

See the code here:

http://jsfiddle.net/mazdakiat/cu9Cr/

Answer 1

When you float an element, it takes it out of the normal stream. That way, by floating pink, you let the green block slide underneath. However, A inside the green block is different. This is a child, and a pink block pushes this content. It appears underneath because the pink block completely covered the green block and pushed the contents from below. See this script for a better image.

http://jsfiddle.net/cu9Cr/1/

Answer 2

A floating pink box pushes it out of the document stream. The green box then jumps to where it would be if the pink box were not there at all (text inside the elements, but flowed around the floating elements). The pink box is shown at the top because without the z-index attribute specified on any object, browsers place elements that appear first in the html higher in the z-index than the elements below.

[update] according to mrtsherman's comment below, setting a z-index for any item will have no effect if their position is not set to relative, absolute or fixed.