sammarcow sammarcow - 6 months ago 21
HTML Question

why does div move when z index is set?

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?

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

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;