How to force z-index of hover state div so that it appears above an isotope element?

Question

i am trying to get a hover state div to appear above an isotope element (an image thumbnail).

i have managed to get it above other divs but not this particular div.

the jsfiddle shows exactly where i am up to and the jquery below is the script i am running for the hover effect.

i am using a modified version of the isotope.min.js file to remove some relative positioning that was being added to the container.

jsfiddle

http://jsfiddle.net/rwone/nvtCW/

script

$(".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);
}                
);

thank you.

Answer 1

Ah, the magic of z-indexes. When you've got the time, eventually go read up on them. It's really fascinating on how all this bogus works.

I've understood correct, your issue is that the non-hovered Boxes are above the Box that appears on hover, yes?

Long story short, put the hovered surrounding element in a higher z-index.

$(".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()
  }                
);

Edit: Oh, and while I'm at it, have the working JSFiddle: http://jsfiddle.net/nvtCW/10/