Question

这是我的jsfiddle：http://jsfiddle.net/HamishT/4Lhyaxwn/。一切都按照需要运行 - 点击后，div就会出现在前面。然而，当点击另一个右边的div然后单击它左边的div时，右手div保持在顶部（这可能更容易理解，只需通过玩jsfiddle - 你＆＃39; ll明白了吗）。造成这种情况的原因是什么以及我该如何防止它？

这是我的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根本不起作用。

如果您在position: relative;上设置.rotate，则所有内容都会按预期运行。

有关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'
    });
};

}）;

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

3 个答案: