Question

我读到z-index为正且大于其他div应该将div叠加在具有较低z-index的其他div之上。为什么识别出的div会移动，我该如何防止这种情况发生？这个问题不同于询问显示：无vs可见性，因为z-index应该允许将div从x，y 2维平面分层到第三维z。

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

＆＃13;

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);

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

z-index不影响它。这是display: none，它正在搞乱其他元素的定位。请参阅this question。

如果您想要一个空白区域，div在没有隐藏的地方，请使用

visibility: hidden;

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

position: absolute;

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

1 个答案: