5

我正在为一家教育公司创建一个学习模块，我在其中创建 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;
}
4

1 回答 1

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 中的元素。

于 2012-10-30T21:34:57.143 回答