純CSS降Z-index？

從技術上講，我可以用一點點jQuery修復自己的問題，這個問題引發了我的好奇心; 可以按降序對未知數量的元素進行z索引？純CSS降Z-index？

這是我的問題更具體。我有一個未知數div s，它將由PHP在foreach循環中創建。問題在於這些div的背景是（在區域中）透明且被設計爲重疊。使用負面的CSS margin，我可以輕鬆地將元素拉到另一個元素上，但問題在於，默認情況下，css在渲染時看起來更高的索引。

要illustarte我的意思，here is a fiddle.

這個思考了幾天後，我一直沒能拿出一個答案。所以，對你。有任何想法嗎？

P.S.如果有人是嚴格來這裏一個jQuery的解決方案，那就是：

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

來源

2011-07-11 AndyL

不知道用CSS做這件事的方法。我的第一個問題是「爲什麼要這樣做？」 – BiAiB

因爲........！ – Jawad

在循環開始之前，你不能逆轉你在PHP中循環的數組嗎？ –

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的用戶出現功能問題，還是僅僅是審美問題？

來源

2011-07-11 17:07:53 robertc

啊！內聯樣式從PHP！太精彩了。我知道我錯過了一些東西。謝謝！但是我想這意味着實際上沒有辦法在CSS中完成它。無論如何，這主要是好奇心。 +1爲一個偉大的解決方案。 – AndyL

@AndyL不，我認爲任何優雅的CSS解決方案都必須等到[將來實現CSS變量]（http://www.xanthir.com/blog/b49w0） - 但[不要屏住呼吸]（http://www.w3.org/People/Bos/CSS-variables）。 – robertc

最好的解決方案是在PHP循環中添加內聯樣式。

如果您知道正在循環的對象的長度，則可以輕鬆計算內聯樣式。

這不是最優雅的解決方案，但它會一直工作。

來源

2011-07-11 17:20:23 Emil

純CSS降Z-index？

回答

相關問題