CODEWITHSUNDEEP
jqueryhtmlcss
User2468
User2468

Reputation: 99

Toggling z-index of overlapping divs with jQuery issue

Here is my jsfiddle: http://jsfiddle.net/HamishT/4Lhyaxwn/ . Everything works as wanted - when clicked, the div comes to the front. However, when a div to the right of another is clicked then the one to the left of it is clicked, the right hand div stays on top (this may be easier to understand simply by playing around with the jsfiddle - you'll see what I mean). What is causing this and what should I do to prevent it?

Here is my js:

var degrees = (Math.random() - 0.5) * 40;

var flag = 0;

$(".rotate").click(function() {
    if (flag == 0) {
        flag = 1;
        $(this).css({
            '-webkit-transform': 'rotate('+degrees+'deg) scale(2)',
            '-moz-transform': 'rotate('+degrees+'deg) scale(2)',
            '-ms-transform': 'rotate('+degrees+'deg) scale(2)',
            '-o-transform': 'rotate('+degrees+'deg) scale(2)',
            'transform': 'rotate('+degrees+'deg) scale(2)',
            'z-index': '100'
        });
        degrees = (Math.random() - 0.5) * 40;
    } else {
        flag = 0;
        $(this).css({
            '-webkit-transform': 'rotate(0deg)',
            '-moz-transform': 'rotate(0deg)',
            '-ms-transform': 'rotate(0deg)',
            '-o-transform': 'rotate(0deg)',
            'transform': 'rotate(0deg)',
            'z-index': '10'
        });
    };
});

From what I can work out (I may be wrong) is that the z-index back to 10 isn't working correctly.

Upvotes: 0

Views: 238

Answers (3)

a828h
a828h

Reputation: 146

just do this

$(".rotate").click(function() {
   if (flag == 0) {
       flag = 1;
       $(this).css({
        '-webkit-transform': 'rotate('+degrees+'deg) scale(2)',
        '-moz-transform': 'rotate('+degrees+'deg) scale(2)',
        '-ms-transform': 'rotate('+degrees+'deg) scale(2)',
        '-o-transform': 'rotate('+degrees+'deg) scale(2)',
        'transform': 'rotate('+degrees+'deg) scale(2)',
        'position': 'relative',
        'z-index': '100'
    });
    degrees = (Math.random() - 0.5) * 40;
    $(this).siblings(".rotate").css({'z-index':'99'});
} else {
    flag = 0;
    $(this).css({
        '-webkit-transform': 'rotate(0deg)',
        '-moz-transform': 'rotate(0deg)',
        '-ms-transform': 'rotate(0deg)',
        '-o-transform': 'rotate(0deg)',
        'transform': 'rotate(0deg)',
        'position': 'static',
        'z-index': '10'
    });
};

});

Upvotes: 0

henser
henser

Reputation: 3327

Add position:relative to .rotate and add .addClass('up').siblings('.rotate.up').css('z-index','99'); to the line applied to the upper elements

see JSFIDDLE to see it in action

changes were the following:

JS 

var degrees = (Math.random() - 0.5) * 40;

var flag = 0;

$(".rotate").click(function() {
    if (flag == 0) {
        flag = 1;
        $(this).css({
            '-webkit-transform': 'rotate('+degrees+'deg) scale(2)',
            '-moz-transform': 'rotate('+degrees+'deg) scale(2)',
            '-ms-transform': 'rotate('+degrees+'deg) scale(2)',
            '-o-transform': 'rotate('+degrees+'deg) scale(2)',
            'transform': 'rotate('+degrees+'deg) scale(2)',
            'z-index': '100'
        }).addClass('up').siblings('.rotate.up').css('z-index','99');
        degrees = (Math.random() - 0.5) * 40;
    } else {
        flag = 0;
        $(this).css({
            '-webkit-transform': 'rotate(0deg)',
            '-moz-transform': 'rotate(0deg)',
            '-ms-transform': 'rotate(0deg)',
            '-o-transform': 'rotate(0deg)',
            'transform': 'rotate(0deg)',
            'z-index': '10'
        });
    };
});

CSS

.rotate {
    position:relative;
    height:98px;
    width:98px;
    border:1px solid #000;
    background-color:#f00;
    float:left;
    margin:10px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index:10;
}

Upvotes: 0

Andi North
Andi North

Reputation: 897

The issue is that your z-index on .rotate isn't working at all.

If you set position: relative; on .rotate, all will work as expected.

More information on how z-index works can be found at CSS-Tricks.

Upvotes: 5

Related Questions