使用公式为父元素的每个子元素应用不同的位置？

Question

我有一个具有相对定位的父元素和三个具有绝对定位的子元素。我想弄清楚是否有一种方法可以使每个子元素通过其索引具有不同的顶部/左侧定位。

不一定非要这样，但我想象的可能是......

.parent-element .child-element {
    position: absolute;
    top: 50% - (5 * n);
    left: 50% - (5 * n);
}

其中

n

代表子元素在父元素中的索引。因此，第一个孩子的索引为 1，第五个孩子的索引为 5，依此类推。

Answer 1

这是一个简单的例子。

每个子节点都为其索引设置一个 css 变量，并在计算中使用该变量。

注意我假设 % 是要使用的单位，因为它将响应视口更改。

.parent-element {
  position: relative;
  width: 50vmin;
  height: 50vmin;
}

.parent-element .child-element {
  position: absolute;
  top: calc(50% - (5% * var(--n)));
  left: calc(50% - (5% * var(--n)));
}

.child-element:nth-child(1) {
  --n: 1;
}

.child-element:nth-child(2) {
  --n: 2;
}

.child-element:nth-child(3) {
  --n: 3;
}

<div class="parent-element">
  <div class="child-element">1</div>
  <div class="child-element">2</div>
  <div class="child-element">3</div>
</div>