sammarcow sammarcow - 2 years ago 73
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?

var mouseX;
var mouseY;
$(document).mousemove(function(e) {
mouseX = e.pageX + 20;
mouseY = e.pageY - 20;

$(".dimoption").click(function() {

var $maxdim = $("#msgmaxdim");
'top': mouseY,
'left': mouseX
setTimeout(function() {
}, 3000);


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

<script src=""></script>
<input type="checkbox" class="dimoption">Text
<div id="msgmaxdim" class="description">Popup overlay</div>
<div id="othercontent">
Why does this div move?

Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download