为什么当z索引被设置时div会移动？

我读到z-index为正数，大于其他div应该将div放在其他z-index较低的位置。为什么识别的div移动，我如何防止这个？这个问题不同于询问display：none vs visibility，因为z-index应该允许将div从x，y二维平面分层到第三维z。为什么当z索引被设置时div会移动？

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>

来源

2016-05-12 sammarcow

它不需要做z-index。阅读[可见性：隐藏和显示：没有？之间的区别是什么？]（http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone） – 4castle

这里的源代码文本是不一样的小提琴（好吧，无论如何，不是最新的修订版，也许是5831之前的修订版之一...） –

@MrLister我纠正了jsfiddle。 – sammarcow

的z-index不影响它。这是display: none这是与其他元素的定位搞乱。见this question。

如果你希望这是一个空白的空间，当它没有隐藏的div是，使用

visibility: hidden;

如果你想要的元素重叠时div可见，使用

position: absolute;

来源

2016-05-12 16:38:23 4castle

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

为什么当z索引被设置时div会移动？

回答

相关问题