文件正在上傳的轉圈圈gif圖片引出的fixed定位和absolute定位

 文件正在上傳的轉圈圈gif圖片

 一、文件上傳時，未上傳返回成功狀態之前給個gif動態圖片顯示在頁面，改善用戶體驗。

  <!--S 遮罩層 -->
    <div id="mask-div"></div>
    <div class="download-progress">
        <img src="../resource/skin/default/images/thirdPlatform/progress.gif" alt="" />
        <p>文件正在上傳，請稍后...</p>
    </div>
    <!--E 遮罩層 -->

 

我習慣這樣寫，把遮罩層和內容層放在兩個div中。

遮罩層有兩個用途，一個是用來顯示那一層半透明灰色，另一個用途是當我點擊除了內容區的其他位置時，幫助我關閉彈窗。

 

二、最簡單的文件正在上傳gif圖片的樣式

最外層容器left：0，top：0；position：absolute/fixed

內容層容器left：50%，top：50%，margin-left：XX，margin-top：YY；position：absolute

#mask-div {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  display: none;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
}

 

.download-progress {
  position: absolute;
  left: 50%;
  top: 50%;
  display: none;
  z-index: 101;
  margin-left: -62px;
  margin-top: -62px;
}

.download-progress img {
  display: block;
  width: 124px;
  position: absolute;
  left: 10px;
  top: 0;
}

 

PS：當沒有什么元素作為relative相對定位的元素時，我是喜歡直接把最外層的容器設置為position：fixed。

然后再根據這個外層容器的width和height，設置margin-left、margin-right。

 

如圖：就是使用position：fixed

 

三、IE78 和 IE edge瀏覽器對透明度的不同支持寫法

 透明度寫法，如果是高級瀏覽器是直接opacity：0.6（舉個栗子而已哈）

低級瀏覽器使用濾鏡，不推薦使用，據說影響性能。但是因為要兼容低版本的IE，所以還是使用一下。filter：alpha（opacity=60）

 

如圖：IE9+

 

 如圖：IE9-（IE8/7）

 

知識點：

position：fixed，相對於瀏覽器窗口來對元素進行定位
position：absolute，相對於距離最近的設置為position為relative的父元素進行定位。
所以像有一些彈窗，無論什么時候在哪一處點擊，彈窗位置都一樣的，理所當然是使用fixed，最常見的莫過於當點擊登錄、注冊時的彈窗。因為在整個站 很多位置會出現這個彈窗，所以直接設置position：fixed，相對於瀏覽器窗口定位。不大適合使用fixed定位，有時彈窗太長，屏幕有太矮，彈窗就會出現被遮住的情況。