Css 将多个绝对定位的图元一个在另一个下方对齐

如标题中所述：假设我有一个给定的HTML结构，并希望通过使用CSS来实现这一点（我的项目中也有较少的内容，但我对它完全陌生）。我可以用另一种方式来包装这些元素。。但如果可能的话，我不希望为此操纵DOM

简化标记：

 <div class="mummy">
      <a class="child" href="#">Boo</a>
      <a class="child" href="#">Boo</a>
      <a class="child" href="#">Boo</a>
      <a class="child" href="#">Boo</a>
    </div>

当然，元素重叠是因为它们都有相同的位置<代码>页边距顶部似乎是正确的选择，但如何计算

由于使用较少，我可以为高度声明一个变量，然后说

@varHeight*n

。但是我不知道当前元素的索引（n）

---

谢谢你的建议

如果需要保持相同的HTML结构，可以从

.child

类中删除

位置：绝对

属性

display:block

将以块的形式显示元素，以便将它们一个放在另一个下面

有关显示属性的更多信息，请参见：

<>你也可以考虑其他解决方案，尽管从代码中删除<代码>位置：绝对< /代码>在我看来是最简单和最直接的。其他一些想法可以是：

• 柔性箱
• 显示：表格
• JavaScript

。妈咪{
位置：相对位置；
宽度：9em；
高度：自动；
背景：绿色；
}
.孩子{
排名：0；
左：0；
显示：块；
宽度：100%；
高度：2米；
背景：浅蓝色；
边框：1px纯红；
}

---

如果需要保持相同的HTML结构，可以从

.child

类中删除

position:absolute

属性

display:block

将以块的形式显示元素，以便将它们一个放在另一个下面

有关显示属性的更多信息，请参见：

<>你也可以考虑其他解决方案，尽管从代码中删除<代码>位置：绝对< /代码>在我看来是最简单和最直接的。其他一些想法可以是：

• 柔性箱
• 显示：表格
• JavaScript

。妈咪{
位置：相对位置；
宽度：9em；
高度：自动；
背景：绿色；
}
.孩子{
排名：0；
左：0；
显示：块；
宽度：100%；
高度：2米；
背景：浅蓝色；
边框：1px纯红；
}

---

在不删除位置的情况下考虑相同的HTML/CSS结构：绝对。假设在任何场景中只有10个子项。请看下面的预览

div a:nth-child(2n){margin-top:2em;border:2px solid green;}
div a:nth-child(3n){margin-top:4em;border:2px solid yellow;}
div a:nth-child(4n){margin-top:6em;border:2px solid blue;}
div a:nth-child(5n){margin-top:8em;border:2px solid cyan;}
div a:nth-child(6n){margin-top:10em;border:2px solid black;}
div a:nth-child(7n){margin-top:12em;border:2px solid silver;}
div a:nth-child(8n){margin-top:14em;border:2px solid violet;}
div a:nth-child(9n){margin-top:16em;border:2px solid black;}
div a:nth-child(10n){margin-top:18em;border:2px solid white;}

---

希望这有助于考虑相同的HTML/CSS结构而不删除位置：绝对。假设在任何场景中只有10个子项。请看下面的预览

div a:nth-child(2n){margin-top:2em;border:2px solid green;}
div a:nth-child(3n){margin-top:4em;border:2px solid yellow;}
div a:nth-child(4n){margin-top:6em;border:2px solid blue;}
div a:nth-child(5n){margin-top:8em;border:2px solid cyan;}
div a:nth-child(6n){margin-top:10em;border:2px solid black;}
div a:nth-child(7n){margin-top:12em;border:2px solid silver;}
div a:nth-child(8n){margin-top:14em;border:2px solid violet;}
div a:nth-child(9n){margin-top:16em;border:2px solid black;}
div a:nth-child(10n){margin-top:18em;border:2px solid white;}

---

希望这有帮助

您的容器会有多少这样的元素？它是动态的吗？根据你的陈述，我认为可能是，但我只是想澄清一下。@Harry孩子的数量是动态的，是的。不是超过10，而是动态的。@ho.s是这样的：？@Harry“去掉位置：绝对”是不可能的。不需要更改标题，这是正确的。我只是想知道NicoO的意思，然后问。好吧，那么您是否需要我提到的方法的答案（或者）您知道您的jQuery解决方案并将继续进行此操作？您的容器将有多少这样的元素？它是动态的吗？根据你的陈述，我认为可能是，但我只是想澄清一下。@Harry孩子的数量是动态的，是的。不是超过10，而是动态的。@ho.s是这样的：？@Harry“去掉位置：绝对”是不可能的。不需要更改标题，这是正确的。我只是想知道NicoO的意思，然后问。好的，那么你需要我刚才提到的方法的答案吗（或者）你知道你的jQuery解决方案并将继续这个问题吗？谢谢你的想法。正如我在标题中所问的，我需要元素的位置：绝对。似乎我的问题的答案是，这是不可能的，或者只是对于给定数量的元素。在我的小提琴中，锚定标记已经显示为：block.（和…where has.mummy gone？？？：-）@ho.s如果您愿意使用JavaScript，可以使用posiiton:absolute（我在回答中提到了这个选项）。但是，正如你在问题中所写的，你需要一个CSS解决方案，我没有在我的答案中写细节。你认为使用JS对你来说是一种选择吗？如果是，我将编辑我的答案。：）谢谢谢谢你的主意。正如我在标题中所问的，我需要元素的位置：绝对。似乎我的问题的答案是，这是不可能的，或者只是对于给定数量的元素。在我的小提琴中，锚定标记已经显示为：block.（和…where has.mummy gone？？？：-）@ho.s如果您愿意使用JavaScript，可以使用posiiton:absolute（我在回答中提到了这个选项）。但是，正如你在问题中所写的，你需要一个CSS解决方案，我没有在我的答案中写细节。你认为使用JS对你来说是一种选择吗？如果是，我将编辑我的答案。：）谢谢