Question

虽然从技术上讲我可以通过一点点jQuery解决自己的问题，但这个问题引起了我的好奇心; 可以按降序对未知数量的元素进行z索引吗？

这是我的问题更具体。我有一个未知数量的div s将由PHP在foreach循环中创建。问题是这些div的背景是（在区域中）透明的并且被设计为重叠。使用负CSS margin，我可以轻松地将元素拉到彼此重叠，但问题是默认情况下，css在它们下降时呈现看似更高的索引。

想象一下我的意思，here is a fiddle.

在考虑了几天之后，我一直无法得出答案。那么，对你而言。有什么想法吗？

P.S。如果有人严格来到jQuery解决方案，那么它就是：

$('.myClass').each(function(index) {
    zindex = index * -1;
   $(this).css('zIndex', zindex);
});

Answer 1

最好的解决方案是在PHP循环中添加内联样式。

如果您知道要循环的对象的长度，则可以轻松计算内联样式。

这不是最优雅的解决方案，但它始终有效。

Answer 2

Sort of，但它不是很通用：

div:nth-last-child(1) {
    z-index: 1;
}
div:nth-last-child(2) {
    z-index: 2;
}
div:nth-last-child(3) {
    z-index: 3;
}
div:nth-last-child(4) {
    z-index: 4;
}
div:nth-last-child(5) {
    z-index: 5;
}

您可以写出数百条这些规则，或者您可以使用相同的脚本/循环生成CSS，而您正在编写元素。或者您可以在元素上以内联样式包含z-index。

总而言之，我认为jQuery方法更好 - 它是否会在没有启用JavaScript的情况下为用户带来功能问题，还是仅仅是审美？

纯CSS降序Z指数？

2 个答案: