title: css - parent's position is absolute and child's position is relative and vice versa
body: <p>I have div which hosts another div. Ok, I get the case when the parent is <code>position:relative</code> and
  the child is <code>position:absolute</code>. I don't get what happens when </p>
  
  <ol>
  <li>parent's position is absolute and child's position is relative</li>
  <li>parent's position is absolute and child's position is absolute</li>
  <li>parent's position is relative and child's position is relative</li>
  </ol>
  
  <p>I use the <a href="http://jsbin.com/livacelu/1" rel="noreferrer">JSbin</a> example from <a href="https://stackoverflow.com/questions/24307922/why-does-an-absolute-position-element-wrap-based-on-its-parents-right-bound">Why does an absolute position element wrap based on its parent's right bound?</a> but the question applies to positioning concept in general</p>