文件正在上传的转圈圈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定位，有时弹窗太长，屏幕有太矮，弹窗就会出现被遮住的情况。