CSS属性之display和visibility

我们知道，css中有两个属性可以实现控件的的显示与隐藏功能，分别是display和visibility
在实际开发过程中，某个业务场景需要用户在输入好查询条件并点击查询后，需要显示加载等待图形来增强用户的体验。

div代码如下：

<div id="waitingLogo" class="waitingDiv" style="display: none;"></div>

waitingDiv的css如下：

.waitingDiv {
    width:160px;
    height:130px;
    position: absolute;
    top:60%;
    margin-left:-30px;
    margin-top:-23px;
    left:50%;
    background: url(/statics/pages/images/waiting.gif) no-repeat;
    background-size:80px auto;
    z-index:9999;
}

使用jquery对该div层的显示和隐藏进行控制。
隐藏：

$("#waitingLogo").css("display","none");

显示：

$("#waitingLogo").css("display","block");

然而，确出现如下情况：
第一次点击查询按钮后，该加载等待图形正常显示，第二次点击查询按钮的时候，加载等待图形向下移动了一段距离。

经调查发现display的使用与该div层的位置有关。

详解如下：

display属性:

display:none;时隐藏该元素，确切的说，是在浏览器中完全抹除该元素，而该元素所占的空间（浏览器位置）会被其他元素占据，就像消消乐游戏一样，某行被消除后，其他行会占据空出来的空间。

dispaly:block;显示已经隐藏的元素，确切的说，恢复原来的元素。如果有其他元素占了该元素原来的空间，那么该元素将下移，相当于执行一个append()方法。

visibility：

visibility:hidden;隐藏该元素，即，该元素还在原来的位置，只是你看不到它了，就像你的钱存在银行，你看不到一样。但是它是真是存在的。
visibility:visible;显示隐藏的元素，就像你把钱从银行取了出来一样，你能看到现金了。

所以，最后为了实现该加载等待功能，有两个方案：

1. 将id=“waitingLogo”这个div层重新移动到一个不会被占用到的位置即可
2. 使用visibility隐藏和显示该div