CODEWITHSUNDEEP
jqueryhtmlcsstransformz-index
GluePear
GluePear

Reputation: 7725

CSS transform interferes with z-index

I've seen a few questions about this, but none of their solutions work. I have a grid of boxes, each of which has a CSS transform applied to it. On page load jQuery appends a pop-up <div>, initially invisible, to each box. On rollover of a box, that pop-up is shown. The pop-up has a z-index of 999, the boxes have a z-index of 0. But the pop-up appears underneath the boxes. I've followed the answers to this and this question, but it still doesn't work.

JSFiddle

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');
});

Upvotes: 2

Views: 1245

Answers (1)

Kevin Cittadini
Kevin Cittadini

Reputation: 1469

It's because your popup is INSIDE another div which has default z-index. It has nothing to do with the transformation.

Like Jonathan Sampson said

You can't give a child higher z-index than its parent.

Simple as that.

There're few solutions possible and you should choose what fits your needs.

  • Put your popup outside its div. So its z-index doesn't depends on the parent anymore.
  • Give to the red box a different z-index ( higher than the other red box) - Example

Upvotes: 2

Related Questions