jQuery的淡入淡出问题

jq的淡出为什么位置会变？演示的是带有不同参数的 fadeOut() 方法。
源代码

html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(30000);
  });
});
script>
head>

<body>
<p>演示带有不同参数的 fadeOut() 方法。p>
<button>点击这里，使三个矩形淡出button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;">div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;">div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;">div>
body>

html>

img

img

img


fade-out 结束的时候 display:none,而不是visibility:hidden, 或者opacity:0, display:none 相当于删除了元素，原有的位置上不占据空间，自然会导致其他元素的移动

fadeout 和 fadein 方法的显示隐藏实际是用了display属性的block和none属性的变化，，，当为display：none时原dom会消失，不占位置，剩余出来的空间会导致其他dom排版改变，，，所以会看到位置改变