通过div标签创建透明的加载叠加

Question

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 my working code

Text and buttons not appearing under the loading incon. my transparent is 0.4

.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;
}

<div class="main">
    <div class="loading">
    </div>
    <button>show images</button>
    <p>This is my paragraph.</p>
</div>

<div class="medium">
    <div class="loading">
    </div>
    <button>show info</button>
    <p>hello this is small box</p>
</div>

Answer 1

i think you want to set loading as overlay, for that you have to give the parent element as position: relative and give child loading element position: absolute to fill the parent element.

.main{
height:     250px;
width:      300px;
border: solid 1px red;
overflow: hidden;
float:left;
margin-right:10px;
position: relative;
}
.medium{
    height:     250px;
    width:      100px;
    border: solid 1px blue;
    overflow: hidden;
    position: relative;
}
.loading {  
    position: absolute;
    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;
}

See this updated jsfiddle :- http://jsfiddle.net/pvvo7kre/7/