如何根据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屋!