Css 如何强制悬停状态div的z指数出现在同位素元素上方？

我试图让悬停状态div出现在同位素元素（图像缩略图）上方

我已经设法使它超过其他部门，但不是这个特殊的部门

jsfiddle准确地显示了我的目标，下面的jquery是我为悬停效果运行的脚本

我正在使用同位素.min.js文件的修改版本来删除添加到容器中的一些相对位置

jsfiddle

脚本

$(".magic").hover(
function () {
console.log($(this).position().top);
$(this).find('.hidden_db_data_div')
.css({'left':$(this).position().left+40 + "px" + "!important", 'top':'-50px'}).fadeIn(500);

},
function() { 
$(this)
.find('.hidden_db_data_div')
.fadeOut(100);
}                
);

---

多谢各位

啊，z指数的魔力。当你有时间的时候，最终去阅读他们。这真的很吸引人，所有这些伪造的工作原理

我理解正确，您的问题是非悬停框位于悬停框上出现的框上方，是吗

长话短说，将悬停的周围元素放置在更高的z索引中

$(".magic").hover(
  function () {
    $(this)
      .css('z-index', '999') // This Line - Gives the element a high z-index
      .find('.hidden_db_data_div') 
      .css({'left':$(this).position().left+40 + "px" + "!important",'top':'-50px'}).fadeIn(500);
  },
  function() { 
    $(this)
      .css('z-index', '') // And this line - Gets rid of the inline z-index again.
      .find('.hidden_db_data_div')
      .fadeOut()
  }                
);

编辑：哦，当我在做的时候，让工作的JSFIDLE：