why does div move when z index is set?
<p>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.  </p>

<p><a href="http://jsfiddle.net/9RxLM/5832/" rel="nofollow">http://jsfiddle.net/9RxLM/5832/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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);

});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.description {
  display: none;
  position: relative;
  border: 1px solid #000;
  width: 400px;
  background-color: white;
  z-index: 1;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;input type="checkbox" class="dimoption"&gt;Text
&lt;div id="msgmaxdim" class="description"&gt;Popup overlay&lt;/div&gt;
&lt;div id="othercontent"&gt;
  Why does this div move?
&lt;/div&gt;</code></pre>
</div>
</div>
</p>