title: floating a div over an (absolutely positioned?) background div (or image)
body: <p>I couldn't seem to find a reference to this problem anywhere after lengthy searching. This probably means I am missing basic concepts but I am going to go ahead and ask anyway.  I am trying to have a <code>float:left</code> <code>&lt;div&gt;</code> overlay a background image. A simplified version of the problem is below (with a div representing the image for quick reproducibility)</p>
  
  <pre><code>&lt;div style='position: absolute; background-color: blue; width: 500px; height: 500px'&gt;
       BACKGROUND DIV
  &lt;/div&gt;
  &lt;div style='float: left; background-color: yellow; width: 100px; height: 100px'&gt;
       FLOATING IMAGE
  &lt;/div&gt;
  </code></pre>
  
  <p>It seems the absolutely positioned div overlays the float. How do I sort this out - without resorting to the <code>background-image</code> property of the parent (this is not an option) ?</p>