Chrome不尊重z-index订单

Question

我正在为一家教育公司创建一个学习模块,在那里我创建了25个动物精灵(带有图像的画布)并将它们放入一个农场(带有背景图像的div).然后我根据它们在背景上的位置对它们的z-index重新排序,以便更接近的精灵将位于更远的顶部(背景DIV和精灵都是位置:绝对;).

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

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 可能有点棘手。W3 的这篇文章可能会有所帮助。但该规范可能有点令人困惑。如果我无法让 z-index 工作，那么我会确保 DOM 中的元素排序正确。通常，DOM 中较低的元素具有较高的可见性偏好。因此，在某些条件下，这可能是正确的：

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

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