title: Fixed div with respect to container NOT body
body: <p>I want to fix position of div with respect to it's container div, NOT with respect to body. I played a lot and searched as well but didn't find the solution.</p>
  
  <p>Please not <strong>.container</strong> and <strong>.content</strong> both are of responsive height and can't take a fixed height. <strong>height:2000px;</strong> given to <strong>.container</strong> for demontration purposes only. </p>
  
  <p>While the actual case is: <strong>heights are responsive.</strong> <strong><a href="http://jsfiddle.net/FbSBP/" rel="nofollow">Here is jsFiddle</a></strong></p>
  
  <pre><code>&lt;div class="content"&gt;content&lt;br&gt;content&lt;br&gt;content&lt;br&gt;content&lt;br&gt;content
  &lt;/div&gt;
  &lt;div class="container"&gt;content
      &lt;div class="loaderWrap"&gt;
          &lt;div class="loader2"&gt;Loading Spinner&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.content {
      background:green;
  }
  .container {
      position: relative;
      background:orange;
      height:2000px;
  }
  .loaderWrap {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: red
  }
  .loader2 {
      position: fixed;
      top: 50%;
      left: 50%;
  }
  </code></pre>