title: Position element inside absolute parent with respect to grandparent
body: <p>I have child element which need to be positioned <code>absolute</code> with the grandparent. The problem is that the parent is also positioned absolutely.</p>
  
  <p>I can't use JavaScript. How can I achieve this with just pure CSS?</p>
  
  <p><strong><a href="http://jsfiddle.net/w1t25ydb/" rel="noreferrer">JSFiddle Demo</a></strong></p>
  
  <pre><code>&lt;div class="col-md-6 gp"&gt;
      &lt;div class="col-md-4 p"&gt;
          &lt;div class="col-md-2 c"&gt; position me w.r.t to .gp&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.gp { height : 200px; position: relative; }
  
  .p {
      height : 100px; width: 250px;
      position :absolute;
      top : 50px; left: 50px;
  }
  
  .c { position: absolute; height: 50px; }
  </code></pre>