Keep transforming elements on top of other elements

Question

I'm learning to use CSS3 3D transforms, but I'm having trouble keeping elements which are transforming on top of all other elements.

This is what I have so far: http://bos.rggwebdesigns.com/

As you can see, the site follows standard z-index rules for the hierarchy of the three .row divs, meaning that cards in the first row are behind the card in the second row and so on.

I tried adding lines to the transform script (in main.js) which selects the .row element above the clicked .card element and sets its z-index to 1000, however that doesn't seem to work.

$(document).ready(function() {
    $('.card').click(function() {
        $('.row').removeClass('top');
        $('.card').not(this).removeClass('flipped');
        $(this).parents().eq(2).toggleClass('top');
        $(this).toggleClass('flipped');
    })
});

To reiterate, I'm trying to ensure that all parts of a transforming element always appear above every other element.

Answer 1

According to what I see z-index needs to be relative. So if you set the position : relative; for class "row" that should solve your problem.

EDIT: I was reviewing your code. You also need to change .row.top in css to .top