如何根据div列表中该div的顺序使用CSS定位div? [英] How to position a div with css based on the order of this div in a list of divs?

问题描述

好的，我想根据重叠元素在列表中出现的顺序来放置它们.因此，第一个将不会被翻译，第二个将被翻译60px，第三个将被翻译120px，依此类推...这只是我所实现的简化版本.另外，在示例中有三个元素，在现实生活中，我将不知道会有多少个元素.这是可变的.

Okay, I want to position overlapping elements based on the order they appear in a list. So the first will not be translated, the second will be translated 60px, the third 120px, etc... This is just a simplified version of what I achieve. Also, in the example there are three elements, in real life I won't know how many elements there will be. This is variable.

下面是一个简单的代码段，可以实现我想要的功能，但是您可以很容易地看到此问题:到多行css的方式...所以问题是，如何根据其顺序放置某些内容?我以为我应该对:nth-​​child(n)做些什么?但是，如何使用元素(n)的顺序来计算其位置?

Below is a simple snippet that can achieve what I want, but you can easily see the problem with this: way to many lines of css... So the question is, how to position something based on its order? I assume that I should do something with :nth-child(n)? But how can I use the order of the element (n) to calculate its position?

.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>

更新:这是我真正想要的(最后)，其中各个步骤从右向左滑动...

UPDATE: This is what I really want (in the end), where the different steps are sliding in from right to left...

推荐答案

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

Don't use position:absolute and consider negative margin to create the overlap

.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>

这篇关于如何根据div列表中该div的顺序使用CSS定位div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！