Chrome不尊重z-index订单

Question

我正在为一家教育公司创建一个学习模块，在那里我创建了25个动物精灵（带有图像的画布）并将它们放入一个农场（带有背景图像的div）。然后我根据它们在背景上的位置重新排序它们的z-index，以便更接近的精灵将位于更远的顶部（背景DIV和精灵都是 position：absolute; < /强>）。

这是重新排列精灵的功能：

Array.prototype.sortIndices = function (func) {
    var i = j = this.length,
        that = this;

    while (i--) {
        this[i] = { k: i, v: this[i] };
    }

    this.sort(function (a, b) {
        return func ? func.call(that, a.v, b.v) : 
                      a.v < b.v ? -1 : a.v > b.v ? 1 : 0;
    });

    while (j--) {
        this[j] = this[j].k;
    }
}

function rearrangeSprites() {
    var zSprites = new Array();
    for (var i = 0; i < sprites.length; i++) {
        var a = $('#sprite_'+i).css('bottom');
        a = a.substr(0, a.length - 2);
        zSprites[i] = { b : -a*1 };
    }
    zSprites.sortIndices(function(a,b) { return a.b - b.b; });

    for (var i = 0; i < zSprites.length; i++) {
        spriteObjects[zSprites[i]].style.zIndex = (1001 + i) + '';
    }
}

它在IE和Firefox中运行良好，但Chrome不尊重z-index顺序。

任何想法？

---

回答答案：

justspamjustin：正如文章似乎指出的那样，在某些时候尝试过负z-指数。还尝试使用以下代码重新排序对象：

    $('.sprite').detach();
    for (var i = 0; i < zSprites.length; i++) {
        $('#Stage_udi_meadow').append(spriteObjects[zSprites[i]]);
        spriteObjects[zSprites[i]].style.zIndex = (i + 1000) + '';
    }

纳达！

弗朗西斯：用DIV来替换画布是很有意义的，因为很多代码是围绕画布功能构建的。我还需要它作为画布，因为我使用透明度，PNG阴影和拖动的命中测试，这对于简单的DIV不起作用，所以我将保存这个美味的选项。

apsillers： CSS（根据要求）：

精灵：

element.style {
width: 60.674351585014406px;
height: 60.674351585014406px;
left: 204.55043227665706px;
top: 22.550432276657062px;
cursor: pointer;
z-index: 1003;
}

.sprite {
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
overflow: hidden;
position: absolute;
z-index: 140;
}

.EDGE-122375087, .EDGE-122375087 * {
-webkit-transform: translateX(0px);
}

为背景：

element.style {
position: absolute;
margin: 0px;
left: 0px;
top: 177px;
width: 566px;
height: 347px;
right: auto;
bottom: auto;
background-size: 100%;
background-image: url(http://localhost:9090/cet_html5/publish/images/udi_meadow.png);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
opacity: 1;
background-position: 0px 0px;
background-repeat: no-repeat no-repeat;
}

#Stage_udi_meadow {
}

.EDGE-122375087, .EDGE-122375087 * {
-webkit-transform: translateX(0px);
}

user agent stylesheetdiv {
display: block;
}

Inherited from body
Style Attribute {
cursor: auto;
}

Answer 1

有时z-index可能有点棘手。这article from the W3可能会有所帮助。但该规范可能有点令人困惑。如果我无法使z-index工作，那么我确保DOM中的元素正确排序。通常，DOM中较低的元素具有较高的可见性偏好。所以在某些情况下，这可能是真的：

<div style="z-index:9999">I'm on bottom</div>
<div>I'm on top</div>

尝试重新排序DOM中的元素。