title: Why CSS position absolute behaves like relative to its child absolute elements
body: <p>I'm having a structure simmiliar to this:</p>
  
  <pre><code>&lt;div style="border: 1px solid red; position: relative; height: 200px"&gt;
          &lt;div style="border: 1px solid green; position: absolute; left: 10px; top: 10px;height: 100px; width: 200px "&gt;
              &lt;div style="border: 1px solid blue; position: absolute; top: 15px; 10px; height: 20px; width: 20px;"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>In this example 3rd div takes 2nd div as relative. I always thought that you position to nearest <code>relative</code> element, not to nearest <code>absolute</code> element.<br>
  Why does it behave like that? Did I miss something in last changes?</p>