純粋なCSS降順Z-インデックス？

Question

技術的には、jQueryを少し使って自分の問題を解決することはできますが、質問は私の好奇心を呼び起こしました。 未知数の要素を降順でz-索引付けできますか？

これは私の問題です。私は、ループでPHPによって作成される未知数divを持っています。問題は、これらの背景が（領域内に）透明であり、重複するように設計されていることです。否定的なCSS marginを使用すると、要素を互いに重なり合わせるのは簡単ですが、デフォルトでは、CSSはそれらが下がるにつれて一見高いインデックスでレンダリングされるという問題があります。

は数日間、この上で考えた後、私が何を意味するかhere is a fiddle.

をillustarteするために、私は答えを思い付くことができませんでした。それで、あなたに。何か案は？

P.S.

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

Answer 1

Sort ofが、それは非常に一般的ではありません：誰もがjQueryの解決のために厳密にここに来ている場合は、ここにある

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を有効にしていないユーザーにとって機能的な問題を引き起こすのでしょうか、それとも美的でしょうか？

Answer 2

最高の解決策は、PHPループでインラインスタイルを追加することです。

ループスルーするオブジェクトの長さを知っていれば、簡単にインラインスタイルを計算できます。

これは最も洗練された解決策ではありませんが、常に機能します。