GZRJ20130125（使div居中/div背景微白使底层不能点/使用position: absolute;和position: relative;）

.progressBar {
    display: block;
    font-weight: bold;
    height: 28px;
    left: 50%;
    line-height: 27px;
    margin-left: -74px;
    margin-top: -14px;
    padding: 10px 10px 10px 50px;
    position: absolute;
    text-align: left;
    top: 50%;
    width: 148px;
    z-index: 2001;
}

.progressBar {

    background: url("./images/progressBar/progressBar_m.gif") no-repeat scroll 10px 10px #FFFFFF;

    border: 2px solid #86A5AD;

}

<!--  html 代码-->
<div id="progressBar" class="progressBar" style="">数据加载中，请稍等...</div>

 底层不能点击（红色部分得层次很重要）

.background {
    background: none repeat scroll 0 0 #FFFFFF;
    display: block;
    height: 100%;
    left: 0;
    opacity: 0.4;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2000;
}
<div id="background" class="background" style=""></div>

 position: absolute;和position: relative

 

当父层F的position设为relative(相对定位) 子层Z的position设为(绝对定位)时,子层Z的偏移是相对于父层F来定位,

例如top:10px的偏移量就使子层Z的顶部和父层F的顶部有10px的距离.

如果父层F没有设置relative 而子层Z设为absolute,子层Z的定位就是相对于浏览器进行,此时top:10px会使子层Z出现在离浏览器上方10px的地方.

---