title: Position absolute not inside parent
body: <p>I have a problem with my CSS regarding div positions.</p>
  
  <p>I have a parent div which is set to <code>position:relative</code> and a child div set to <code>position:absolute</code></p>
  
  <p>But for some reason the child div is displaying below and outside the borders of the parent div...</p>
  
  <p>This is my CSS:</p>
  
  <pre><code>.big{
      position:relative;
      width:40%;
      border:1px solid black;
      display:inline-block;
  }
  
  .small{
      position:absolute;
      width:75px;
      height:75px;
      border:1px solid green;
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div class="big"&gt;        
      &lt;p align="center"&gt;Test&lt;/p&gt;
      &lt;div class="small"&gt;&lt;/div&gt;        
  &lt;/div&gt;
  &lt;div class="big"&gt;
      &lt;p align="center"&gt;Test&lt;/p&gt;
      &lt;div class="small"&gt;&lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>I have provided a JSFiddle to show you it in action:</p>
  
  <p><strong><em><a href="http://jsfiddle.net/j6VLc/1/" rel="noreferrer">http://jsfiddle.net/j6VLc/1/</a></em></strong></p>
  
  <p>How do i fix it to make the child div be inside the parent div whilst using <code>position:absolute</code> for it?</p>