title: Floating element dissapears behind background when container has position:relative
body: <p>I have boiled down my problem to a pretty simple single file with the CSS included in a <code>&lt;style&gt;</code> tag.
  The problem is: 
  I have a floating right column with a transparent background to show some text and pictures. This works fine, as expected.</p>
  
  <p>Now I want to position a "Site designed by.... " block just above the footer. </p>
  
  <p>I want to use an absolute positioned <code>div</code> for this, which is positioned relative to the containing <code>#content div</code>, which must get the <code>position:relative</code> property to achieve this.</p>
  
  <p>When I set this property, the floating right column disappears, and seems to be hidden behind the background image of the <code>#content</code> block.</p>
  
  <p>I cannot find an explanation for this. A workaround would be to position it relative to the footer (in that case the <code>#footer div</code> would get the <code>position:relative</code> property). </p>
  
  <p>But I just would like to understand what goes wrong here and why the floating column is hidden.  See the links for the layouts without and with the relative positioned content div.</p>
  
  <p>Understandably, in the case of no relative positioning, the text is positioned relative to the browser in the bottom left corner.</p>
  
  <p><a href="http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html" rel="nofollow">http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html</a></p>
  
  <p><a href="http://websites.drsklaus.nl/relativeproblem/index_withrelative.html" rel="nofollow">http://websites.drsklaus.nl/relativeproblem/index_withrelative.html</a></p>