DIV 浮动重叠 实现loading状态

需要浮动在上方的div， 设置如下样式： 

    #div{
         position: absolute;
         z-index:9999;//优先级自定
    }

js中控制loading显示/隐藏

document.getElementById('div').style.display = 'block';
setTimeout(function(){document.getElementById('div').style.display = 'none'},2000);//定时消失

下方是一个demo：

jsp：

<div id="appLoading" style="display: none">
       <span>下载中，请稍候...<br/>请勿关闭此页面</span>
</div>
<button type="text" onclick="download()">下载</button>

js：

 function download(){
        	document.getElementById('appLoading').style.display = 'block';
        	setTimeout(function(){document.getElementById('appLoading').style.display = 'none'},2000);
｝

css：

 #appLoading { 
 	width: 100%;
 	height: 100%;
 	background-color: #e4e7ed;
    filter:alpha(Opacity=80);
    -moz-opacity:0.8;
    opacity: 0.8;
    position: absolute;
    z-index:9999;
}
#appLoading span {
     color: #3a56e6;
     position: absolute;
     display: block;
     font-size: 30px;
     line-height: 30px;
     top: 50%;
     left: 50%;
     width: 300px;
     height: 100px;
     -webkit-transform: translateY(-50%)  translateX(-50%);
     transform: translateY(-50%)  translateX(-50%);
 }