管理多个对象的z-index

Question

看到这个小提琴：http://jsfiddle.net/scottbeeson/PTh4U/

这是我的困境：如果我使用增量z-index，比如说click（z-index + = 1），用户可以点击最顶层的元素100次，使下一个对象的下一次点击无用。我正在这样做的方式，就像在小提琴中一样，我将所有相似的元素设置为基本z-index，然后将当前的元素设置得更高。

$(document).on('click','.tile',function() {
    $('.tile').css('z-index','10');
    $(this).css('z-index','100');
});

这在大多数情况下都有效，但如果您只是点击几次，它会有一些奇怪的行为。也就是说，最后点击的项目有时会更进一步（我猜是具有相同索引的项目是否被任意选择为顶部或不是？）。

Answer 1

我能想到的唯一解决方案是跟踪“onTop”和“最高”，从而说出类似的内容（用工作代码更新）：

http://jsfiddle.net/scottbeeson/PTh4U/3/

$(document).on('click','.tile',function() {
    $(this).css('z-index',zHighest + 1);
    zHighest += 1;
});

有人发现此问题或推荐更好的方法吗？