如何根据这个div在div列表中的顺序用css定位一个div？答案

【问题标题】：How to position a div with css based on the order of this div in a list of divs?如何根据这个div在div列表中的顺序用css定位一个div？
【发布时间】：2020-09-06 21:31:08
【问题描述】：

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

下面是一个简单的sn-p，可以实现我想要的，但是你可以很容易地看到这个问题：多行css...所以问题是，如何根据它的顺序定位一些东西？我认为我应该对:nth-child(n) 做点什么？但是如何使用元素（n）的顺序来计算它的位置呢？

.wizard :nth-child(1) {
  position: absolute;
  width: 400px;
  border-style: solid;
  transform: translateX(calc(0 * 60px));
}

.wizard :nth-child(2) {
  position: absolute;
  width: 400px;
  border-style: solid;
  transform: translateX(calc(1 * 60px));
}

.wizard :nth-child(3) {
  position: absolute;
  width: 400px;
  border-style: solid;
  transform: translateX(calc(2 * 60px));
}

<div class="wizard">
  <div class="step" style="background-color: red;">Step 1</div>
  <div class="step" style="background-color: yellow;">Step 2</div>
  <div class="step" style="background-color: green;">Step 3</div>
</div>

更新：这是我真正想要的（最终），不同的步骤从右到左滑入......

【问题讨论】：

使用 flexbox 和 nowrap 并且每个元素宽度：100px
@ArshpreetWadehra 不确定这是否适用于我的情况，因为我实际上想让 div 相互重叠。我想创建一个向导，其中的向导步骤相互重叠
查看这个线程，使用 CSS 变量作为内联样式，以及使用 attr() 和 calc 的想法（恕我直言）：stackoverflow.com/questions/20490704/…

标签： css sass css-selectors

【解决方案1】：

不要使用position:absolute 并考虑负边距来创建重叠

.wizard {
  display:flex;
  margin:5px;
}

.wizard > div {
  width:400px;
  flex-shrink:0;
  border-style: solid;
}
.wizard > div:not(:first-child) {
  margin-left:-340px;
}

<div class="wizard">
  <div class="step" style="background-color: red;">Step 1</div>
</div>

<div class="wizard">
  <div class="step" style="background-color: red;">Step 1</div>
  <div class="step" style="background-color: yellow;">Step 2</div>
</div>

<div class="wizard">
  <div class="step" style="background-color: red;">Step 1</div>
  <div class="step" style="background-color: yellow;">Step 2</div>
  <div class="step" style="background-color: green;">Step 3</div>
</div>

<div class="wizard">
  <div class="step" style="background-color: red;">Step 1</div>
  <div class="step" style="background-color: yellow;">Step 2</div>
  <div class="step" style="background-color: green;">Step 3</div>
  <div class="step" style="background-color: purple;">Step 4</div>
</div>

<div class="wizard">
  <div class="step" style="background-color: red;">Step 1</div>
  <div class="step" style="background-color: yellow;">Step 2</div>
  <div class="step" style="background-color: green;">Step 3</div>
  <div class="step" style="background-color: purple;">Step 4</div>
  <div class="step" style="background-color: lightblue;">Step 5</div>
</div>

【讨论】：

【解决方案2】：

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')"
}

【讨论】：

【解决方案3】：

如果您事先知道您拥有的.step 的数量，那么您可以使用 for 循环在 scss 中轻松实现：

$stepNumber: 3;

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

这里是jsfiddle。

如果您不知道.step 的数量，那么您需要向其中添加一些JavaScript。

【讨论】：