title: absolute vs relative position width & height
body: <p>i know what is absolute &amp; relative position but some points are still not cleared to me.
  for reference</p>
  
  <p>css:</p>
  
  <pre><code>.rel{
      position:relative;
      background:red;
  } 
  .abs{
      position:absolute;
      background:blue;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="rel"&gt;rel&lt;/div&gt;
  &lt;div class="abs"&gt;abs&lt;/div&gt;
  </code></pre>
  
  <p>now points are :</p>
  
  <ul>
  <li><p>relative div takes 100% width automatically but absolute div only takes content width. why?</p></li>
  <li><p>when i give height 100% there is no effect in the relative div but absolute div takes 100% height. why?</p></li>
  <li><p>when i give margin-top:30px it's shift absolute div also but when i give top:30px then only relative div shift. why?</p></li>
  <li><p>when i don't give <code>top:0 , left:0</code> to the absolute div it's takes above div height. why?</p></li>
  </ul>