为什么设置z索引时div会移动？ [复制]答案

【问题标题】：why does div move when z index is set? [duplicate]为什么设置z索引时div会移动？ [复制]
【发布时间】：2016-09-08 14:53:07
【问题描述】：

我读到 z-index 为正且大于其他 div 应该将 div 堆叠在具有较低 z-index 的其他 div 之上。为什么识别的 div 会移动，我该如何防止这种情况发生？这个问题与询问 display:none vs visibility 不同，因为 z-index 应该允许将 div 从 x、y 二维平面分层到第三维 z。

http://jsfiddle.net/9RxLM/5832/

var mouseX;
var mouseY;
$(document).mousemove(function(e) {
  mouseX = e.pageX + 20;
  mouseY = e.pageY - 20;
});


$(".dimoption").click(function() {

  var $maxdim = $("#msgmaxdim");
  $maxdim.css({
    'top': mouseY,
    'left': mouseX
  }).fadeIn('slow');
  setTimeout(function() {
    $maxdim.fadeOut('slow');
  }, 3000);

});

.description {
  display: none;
  position: relative;
  border: 1px solid #000;
  width: 400px;
  background-color: white;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="dimoption">Text
<div id="msgmaxdim" class="description">Popup overlay</div>
<div id="othercontent">
  Why does this div move?
</div>

【问题讨论】：

它与 z-index 无关。阅读What is the difference between visibility:hidden and display:none?
文中这里的出处和fiddle不一样（嗯，反正不是最新的修订版，可能是5831更早的修订版之一……）
@MrLister 我更正了 jsfiddle。
@sammarcow 不，4castle 是说 z-index 不是问题。相反，更改后的display 值会导致重新定位。无论如何，小提琴还是一样的......你想展示哪个版本的小提琴？
这不是已标记为重复的问题的重复。他不是在谈论展示与可见性。他在问为什么，当它可见时，它正在移动另一个 div。这是叠加层未定位到绝对位置的问题。

标签： html css

【解决方案1】：

z-index 不会影响它。这是display: none，它与其他元素的定位相混淆。见this question。

如果您希望在div 未隐藏时所在的位置有一个空白区域，请使用

visibility: hidden;

如果您希望在div 可见时元素重叠，请使用

position: absolute;

【讨论】：

谢谢，设置为绝对位置是错误的。