title: Nesting multiple divs with respect to one another
body: <p>I have 3 <code>div</code> containers, namely, <code>#containerA</code>, <code>#containerB</code> and <code>#containerC</code>.</p>
  
  <p>I want to position <code>#containerB</code> within <code>#containerA</code> and with respect to
  <code>#containerA</code>'s coordinates. So, I set <code>#containerA</code> to have position:
  relative and #containerB to have <code>position: absolute</code>. This way:</p>
  
  <pre><code>#containerA {
    position: relative;
  }
  #containerB {
    position: absolute;
  }
  </code></pre>
  
  <p>This works fine between <code>#containerA</code> and <code>#containerB</code>. Now, I want to
  make <code>#containerC</code> to be within and with respect to <code>#containerB</code>. However, setting the
  <code>#containerB</code> to have <code>position: relative</code> would cause <code>#containerB</code> to lose
  respect to <code>#containerA</code>. The code would look this way:</p>
  
  <pre><code>#containerA {
    position: relative;
  }
  #containerB {
    position: relative;
  }
  #containerC {
    position: absolute;
  }
  </code></pre>
  
  <p>So, what should I do to get the <code>divs</code> to nest in one another in such a
  way where <code>#containerC</code> is positioned with respect to <code>#containerB</code> and
  <code>#containerB</code> is positioned with respect to <code>#containerA</code>?</p>