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