title: Stop absolutely positioned div from overlapping text
body: <p>Here is a simplification of my layout:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div style="position: relative; width:600px;"&gt;
          &lt;p&gt;Content of unknown length, but quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite quite long&lt;/p&gt;
          &lt;div&gt;Content of unknown height&lt;/div&gt;
          &lt;div class="btn" style="position: absolute; right: 0; bottom: 0; width: 200px; height: 100px;background-color: red;"&gt;&lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem I'm having is that if the text/unknown div content is too long it is overlapping my absolutely positioned div.</p>
  
  <p>I have searched the web and SO for a solution and the only one I found suggested putting an invisible div where absolutely positioned div is - trouble is if I could do that I wouldn't need to have the absolutely positioned div in the first place (or am I missing the point here).</p>
  
  <p>Can anyone think of a css solution before I go down the jquery route?</p>