1

I read that z-index positive and greater than other divs should stack the div on top of others with lower z-index. Why does the identified div move, and how do I prevent this? This question different from asking about display:none vs visibility because the z-index should allow for layering divs from an x, y 2-dimension plane to a third dimension, 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>
sammarcow
  • 2,736
  • 2
  • 28
  • 56
  • 2
    It doesn't have to do with the z-index. Read [What is the difference between visibility:hidden and display:none?](http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) – 4castle May 12 '16 at 16:30
  • The source here in the text is not the same as the fiddle (well, not the latest revision anyway, maybe one of the 5831 earlier revisions...) – Mr Lister May 12 '16 at 16:31
  • @MrLister I corrected the jsfiddle. – sammarcow May 12 '16 at 16:34
  • @4castle I understand the difference between visibility and hiddden, but the z order is higher on the element added, and should not effect the positioning of other elements. – sammarcow May 12 '16 at 16:35
  • 1
    @sammarcow No, 4castle is saying that the z-index is not the problem. Rather, the changed `display` value is, causing the repositioning. Anyway, the fiddle is still the same... which revision of the fiddle did you want to show? – Mr Lister May 12 '16 at 16:37
  • @MrLister ok, but how do I achieve the desired effect of overlaying multiple divs with a popup? – sammarcow May 12 '16 at 16:38
  • 1
    This is not a duplicate of the question that has been marked as a duplicate. He isn't talking about display vs visibility. He is asking why, when visible, it is moving the other div. This is an issue of the overlay not being positioned to absolute. – A.Sharma May 12 '16 at 16:40
  • @A.Sharma The question is: "why does it move?". It moves because `display: none` hides and removes the previous element from the flow, unlike `visibility: hidden` which would have only hid it. Another question would be: "how to make a visible element out-of-flow?". The answer would be absolute (including fixed) positioning, and (partially) floats. – Oriol May 12 '16 at 16:47
  • @Oriol I guess it is open for interpretation then, and the interpretation depends on the OP's underlying question. The answer provides solutions to both though so it's all good. – A.Sharma May 12 '16 at 16:54

1 Answers1

3

The z-index isn't affecting it. It's display: none which is messing with the positioning of the other elements. See this question.

If you want there to be a blank space where the div would be when it's not hidden, use

visibility: hidden;

If you want the elements to overlap when the div is visible, use

position: absolute;
Community
  • 1
  • 1
4castle
  • 32,613
  • 11
  • 69
  • 106