How to position a div with css based on the order of this div in a list of divs?

问题

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.

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

回答1:

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>

回答2:

Is JavaScript okay?

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:

if you know in advance the number of .step that you have, then you can easily achieve this in scss using a for-loop:

$stepNumber: 3;

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

Here is the jsfiddle.

If you don't know the amount of .step, then you will need to add some JavaScript to it.

来源：https://stackoverflow.com/questions/63762716/how-to-position-a-div-with-css-based-on-the-order-of-this-div-in-a-list-of-divs

标签

css

Sass

css-selectors