zインデックスが設定されているとdivが移動するのはなぜですか？

Question

私はzインデックスが正で、他のdivsより大きいと、より低いzインデックスを持つ他のdivの上にdivを積み重ねるべきであると読んでいます。識別された部門がなぜ動くのですか？これをどうすれば防止できますか？この質問は、z-indexはx、yの2次元平面から3次元のzにレイヤーを重ねることができるため、display：noneと可視性について質問するのとは異なります。

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>

Answer 1

z-indexは、それに影響を与えていません。 display: noneは、他の要素の位置を乱しています。 this questionを参照してください。

あなたはそれが隠されていないときdivは次のようになり空白があるようにしたい場合は、あなたがdivが表示されているときの要素が重なるようにしたい場合は

visibility: hidden; 

を使用し、

position: absolute; 

を使用