爲什麼當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會移動？

回答

相關問題