css要素の不明な数のCSSコードを実行するには

Question

php whileループから生成されるいくつかの要素に対してCSSコードを実行して、要素の数を指定できないようにします。 のは、これは各要素

.element { 
    position: absolute; 
    width:200px; 
    height:200px; 
    z-index:100; 
    margin-left:50px; 
} 

のための私のcssである。しかし、これは同じ場所にすべての要素を配置するとしましょう。しかし、私は、この画像のように見える要素が必要です

したがって、各要素の高さを200 - （20 * childIndex）とすると余白は50 * childIndexになり、Z-インデックスは1000になります - childIndexどうすれば私のCSSコードを実行できますか？

Answer 1

解決策の1つは、whileループ内でPHP経由でこれらの要素をインラインスタイルにすることです。それはトリックを行う必要があります。あなたのコードを提供することができますならば、私たちはあなたにここ

Answer 2

をアドバイス&さらにヒントを与えることができるソリューションです。私の理解あたりとして

* { 
 
\t \t \t box-sizing: border-box; 
 
\t \t } 
 
\t \t .container, div{ 
 
\t \t \t width: 200px; 
 
\t \t \t height: 200px; 
 
\t \t \t background-color: yellow; 
 
\t \t \t border: red solid 4px; 
 
\t \t } 
 
\t \t .container { 
 
\t \t \t position: relative; 
 
\t \t \t z-index: 1; 
 
\t \t } 
 
\t \t .container div { 
 
\t \t \t height: calc(100% - 20px); 
 
\t \t \t position: absolute; 
 
\t \t \t margin-left: 20px; 
 
\t \t \t top: 10px; 
 
\t \t }

<div class="container"> 
 
    <div> 
 
    <div> 
 
     <div> 
 
     <div> 
 
      <div> 
 
      <div> 
 

 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

はとてもz-index to be 1000 - childIndexはできませんあなたは、ネストされた要素が欲しいです可能な限りz-indexは同じレベルの要素ではなく、ネストされた要素で動作します