Jquery 纯CSS降序Z索引？

虽然从技术上讲，我可以用一点jQuery来解决我自己的问题，但这个问题激发了我的好奇心未知数量的元素能否按降序进行z索引？

这是我更具体的问题。我有一个未知数量的

div

s，它将由PHP在

foreach

循环中创建。问题是这些

div

s的背景（在区域中）是透明的，并且设计为重叠。使用负CSS

margin

，我可以很容易地将元素拉到彼此重叠的位置，但问题是，默认情况下，CSS会在元素下降时以看起来更高的索引呈现它们

为了阐明我的意思，

经过几天的思考，我还没有找到答案。所以，给你。有什么想法吗

另外，如果有人来这里纯粹是为了一个jQuery解决方案，这里是：

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

，但它不是很通用：

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的用户带来功能问题，或者只是美观问题？

，但它不是很通用：

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的用户带来功能问题，或者只是美观而已？

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

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

---

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

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

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

---

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

我不知道用CSS做这个的方法。我的第一个问题是“到底为什么要这样做？”在循环开始之前，你不能在PHP中反转正在循环的数组吗？@Bryan想得好，但顺序必须保持不变。@BiAiB，因为不幸的是，客户端浏览器上并不总是启用javascript。不知道如何使用CSS实现这一点。我的第一个问题是“到底为什么要这样做？”在循环开始之前，你不能在PHP中反转你正在循环的数组吗？@Bryan想得好，但顺序必须保持不变。@BiAiB，因为不幸的是，javascript并不总是在客户端的浏览器上启用。啊！来自php的内联样式！太棒了。我知道我错过了什么。谢谢然而，我想这意味着实际上没有一种方法可以在CSS中实现。不管怎么说，这主要是出于好奇+1是一个很好的解决方案。@AndyL不，我认为任何优雅的CSS解决方案都必须等到-但是。啊！来自php的内联样式！太棒了。我知道我错过了什么。谢谢然而，我想这意味着实际上没有一种方法可以在CSS中实现。不管怎么说，这主要是出于好奇+1是一个很好的解决方案。@AndyL不，我认为任何优雅的CSS解决方案都必须等到-但是。