I have encountered multiple questions on this issue, but none of the suggested solutions seem to work for me. I have a grid of boxes with CSS transforms applied to each. Upon page load, jQuery appends an invisible pop-up <div> to each box. When hovering over a box, the pop-up is supposed to show up, but it ends up appearing underneath the boxes despite having a higher z-index. I've tried following suggestions from similar queries like this one and that one, but no luck so far.
You can view the JSFiddle here
HTML:
<a id="aaa" class="box effect-4"></a>
<a id="bbb" class="box effect-4"></a>
CSS:
.box {
width:335px;
height:203px;
float:left;
margin:0 15px 15px 0;
position:relative;
-webkit-transform: translate3d(0px, 0px, 0px);
z-index:0;
}
.popup {
width:325px;
height:340px;
background:#333;
z-index:99;
position:absolute;
display:none;
-webkit-transform: translate3d(0px, 0px, 0px);
}
.effect-parent {
-webkit-transform: perspective(1300px);
-moz-transform: perspective(1300px);
transform: perspective(1300px);
}
.effect-4 {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transform: rotateX(-80deg);
-moz-transform: rotateX(-80deg);
transform: rotateX(-80deg);
-webkit-animation: flip ease-in-out forwards;
-moz-animation: flip ease-in-out forwards;
animation: flip ease-in-out forwards;
}
jQuery:
jQuery(document).ready(function() {
$('.box').each(function() {
$(this).append(popupMarkup);
});
$(document).on({
mouseenter: function(){
var popup= 'popup'+$(this).attr('id');
$('#'+popup).fadeIn();
},
mouseleave: function() {
var popup= 'popup'+$(this).attr('id');
$('#'+popup).fadeOut();
}
}, '.box');
});