Chrome doesn't respect the z-index order

Question

I am creating a learning module for an education company where i create 25 animal sprites (canvas with an image in it) and put them in a farm (div with a background image). I then reorder their z-index according to their location on the background, so that closer sprites will be on top of farther ones (both the background DIV and the sprites are position:absolute;).

This is the function that rearranges the sprites:

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

It works great in IE and Firefox, but Chrome doesn't respect the z-index order.

any ideas?

---

Response to answers:

justspamjustin: Tried negative z-indices, as the article seemed to note, at some point. also tried reordering the objects, using this code:

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

nada!

Francis: it would be quite a thing to replace the canvases with, say... DIVs, as a lot of code is built around the canvas features. I also need it to be canvases, because i am using transparency, PNG shadows and doing hit tests for the drag, which will not work with a simple DIV, so I will save this delicious option for last.

apsillers: CSS (as requested):

for the sprites:

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

for the background:

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

Sometimes z-index can be a bit tricky. This article from the W3 may be of some help. But that spec may be a bit confusing. If I can't get z-index to work, then I make sure that my elements in the DOM are ordered properly. Generally elements lower in the DOM, have a higher visibility preference. So under some conditions, this might be true:

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

Try reordering the elements in the DOM.