title: Position relative child of an absolute positioned element
body: <p>How should children with <code>position: relative</code> behave inside of a parent that has <code>position: absolute</code>? </p>
  
  <p>For example (<a href="https://jsfiddle.net/7nfrq868/" rel="nofollow noreferrer">JSFiddle</a>):</p>
  
  <pre><code>&lt;div style="position:relative; float:left; min-width:900px; max-width: 1400px; height:100%;"&gt;
    &lt;div style="position:absolute; top:0; right:0; width:200px; height:300px;"&gt;
      &lt;div style="position:relative; top:0; left:0; width:500px; height:100%;"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I shrink the browser window below the max-width the inner div moves outside of its parent element. Is that normal behavior?</p>