title: creating transparent loading overlay by div tag
body: <p>I want to create a css class for loading operations. I have div panels that contains ajax request operations. I will overlay loading blur on panel. but not working. This is <a href="http://jsfiddle.net/barteloma/pvvo7kre/2/" rel="nofollow">my working code</a></p>
  
  <p>Text and buttons not appearing under the loading incon. my transparent is 0.4</p>
  
  <pre><code>.main{
      height:     250px;
      width:      300px;
      border: solid 1px red;
      overflow: hidden;
      float:left;
      margin-right:10px;
  }
  .medium{
      height:     250px;
      width:      100px;
      border: solid 1px blue;
      overflow: hidden;
  }
  .loading {  
      position:relative;
      z-index:    1000;
      top:        0;
      left:       0;
      height:     100%;
      width:      100%;
      background: rgba( 205, 205, 205, 0.4 ) 
                  url('http://www.easyshopindia.com/images/loading.gif') 
                  50% 50% 
                  no-repeat;
  }
  body .loading{
      display:block;
      overflow:hidden;
  }
  
  &lt;div class="main"&gt;
      &lt;div class="loading"&gt;
      &lt;/div&gt;
      &lt;button&gt;show images&lt;/button&gt;
      &lt;p&gt;This is my paragraph.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="medium"&gt;
      &lt;div class="loading"&gt;
      &lt;/div&gt;
      &lt;button&gt;show info&lt;/button&gt;
      &lt;p&gt;hello this is small box&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>