CODEWITHSUNDEEP
jqueryjquery-uicssz-indextransform
Bobe
Bobe

Reputation: 2040

Keep transforming elements on top of other elements

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.

Upvotes: 5

Views: 838

Answers (1)

Jehanzeb.Malik
Jehanzeb.Malik

Reputation: 3390

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

Upvotes: 2

Related Questions