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

Question

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

@ArshpreetWadehra Not sure if that will work in my case as I actually want to have the divs overlap each other. I want to create a wizard, where wizard steps are sliding on top of each other — MWB, Sep 06 '20 at 09:49
Check out this thread, using CSS variables as inline styles, and also an idea of using `attr()` together with `calc` (preferred IMHO): https://stackoverflow.com/questions/20490704/combine-calc-with-attr-in-css — Rickard Elimää, Sep 06 '20 at 10:08

score 1 · Answer 1 · answered Sep 06 '20 at 11:07

1

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

answered Sep 06 '20 at 11:07

Nine Tails

378
3
15

score 1 · Accepted Answer · answered Sep 06 '20 at 13:31

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>

score 0 · Answer 3 · answered Sep 06 '20 at 10:59

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.

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

3 Answers3

Linked