jquery - 使用 jQuery 问题切换重叠 div 的 z-index

Question

这是我的 jsfiddle:http://jsfiddle.net/HamishT/4Lhyaxwn/ .一切都按预期工作 - 单击时，div 会出现在最前面。但是，当单击另一个 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-index 回到 10 无法正常工作。

Answer 1

问题是您在 .rotate 上的 z-index 根本不起作用。

如果您在 .rotate 上设置 position: relative;，一切都会按预期工作。

有关 z-index 工作原理的更多信息，请访问 CSS-Tricks。 .