使用jQuery切換重疊div的z-index問題

Question

這是我的jsfiddle：http://jsfiddle.net/HamishT/4Lhyaxwn/。一切都按照想要的方式工作 - 點擊後，div出現在前面。但是，當點擊另一個右側的div時，左側的div將被點擊，右側div將保持在頂部（這可能更容易通過玩jsfiddle來理解 - 您會看到什麼我的意思是）。是什麼導致了這一點，我應該怎麼做才能防止它？

這裏是我的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' 
     }); 
    }; 
}); 

從我可以工作了（我可能是錯的）是，Z-指數回到10不能正常工作。

Answer 1

問題是您的z-index在.rotate根本不起作用。

如果您在.rotate上設置了position: relative;，則所有按預期工作。

有關z-index工作原理的更多信息，請訪問CSS-Tricks。

Answer 2

將position:relative添加到.rotate並添加.addClass（'up'）。siblings（'。rotate.up'）。css（'z-index'，'99'）;施加於上元素

看到JSFIDDLE看到它在行動線

變化是以下幾點：

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

Answer 3

只是做這

$(".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' 
    }); 
}; 

}）;