如何为未知数量的css元素运行css代码

Question

我想为一些从php while循环生成的元素运行一个css代码，因此无法指定元素的数量。 让我们说这是我对每个元素的css

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

但这会将所有元素排列在同一个位置。但我需要这些元素看起来像

下面的图像

所以我希望每个元素的高度为200 - （20 * childIndex），margin-left为50 * childIndex，z-index为1000-childIndex。请问如何运行我的css代码？

Answer 1

一种解决方案是在while循环中通过PHP对这些元素进行内联样式。这应该够了吧。如果您能提供代码，我们可以为您提供进一步的提示和建议

Answer 2

以下是解决方案：

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

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

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

根据我的理解，您需要嵌套元素，因此z-index to be 1000 - childIndex将不可能z-index将用于相同级别元素而不是嵌套元素