如何根据div在div列表中的顺序使用css定位div？

好的，我想根据重叠元素在列表中出现的顺序来定位它们。所以第一个不会被翻译，第二个会被翻译成60px，第三个是120px，等等。。。这只是我所取得成就的一个简化版本。另外，在这个例子中有三个元素，在现实生活中我不知道有多少元素。这是可变的

下面是一个简单的片段，可以实现我想要的，但你可以很容易地看到这个问题：多行css的方式。。。所以问题是，如何根据事物的顺序来定位它？我假设我应该对

：n个孩子（n）

？但是如何使用元素（n）的顺序来计算其位置呢

。向导：第n个子项（1）{
位置：绝对位置；
宽度：400px；
边框样式：实心；
变换：translateX（计算（0*60px））；
}
.向导：第n个子项（2）{
位置：绝对位置；
宽度：400px；
边框样式：实心；
转换：translateX（计算（1*60px））；
}
.向导：第n个子项（3）{
位置：绝对位置；
宽度：400px；
边框样式：实心；
转换：translateX（计算（2*60px））；
}

第一步
步骤2
步骤3

如果您事先知道您拥有的

.step

的数量，那么您可以使用for循环在SCS中轻松实现这一点：

$stepNumber: 3;

@for $i from 1 through $stepNumber {
  .step:nth-of-type(#{$i}) {
    transform: translateX(calc(#{$i - 1} * 60px));
  }
}

这是你的电话号码

---

如果您不知道

.step

的数量，则需要向其中添加一些JavaScript。

JavaScript可以吗

let wizard = document.querySelector(".wizard");
wizard_children = wizard.childNodes;
wizard_children.forEach(myFunction);

function myFunction(child, index) {
  child.style.transform = "translateX((index*60)+'px')"
}

---

不要使用<代码>位置：绝对< /代码>并考虑负边距以创建重叠

向导{
显示器：flex；
保证金：5px；
}
.wizard>div{
宽度：400px；
弹性收缩：0；
边框样式：实心；
}
.wizard>div:not（：第一个子级）{
左边距：-340px；
}

第一步
第一步
步骤2
第一步
步骤2
步骤3
第一步
步骤2
步骤3
步骤4
第一步
步骤2
步骤3
步骤4
步骤5

将flexbox与nowrap和每个元素宽度一起使用：100px@ArshpreetWadehra我不确定这是否适用于我的情况，因为我实际上希望div彼此重叠。我想创建一个向导，其中向导步骤彼此重叠。请查看此线程，使用CSS变量作为内联样式，并考虑将

attr（）

与

calc

一起使用（首选IMHO）：