Question

我有多个相对定位的div，每个div都包含3个绝对定位的div。目前，它们显示为彼此重叠，而不是在下方。

如何将它们放置在彼此下方？

每个父div如下所示。

<html>

  <div style="background: #F2F2F2; padding: 10px; border-radius: 50px; position: absolute; width: calc(100% - 30px); height: 15px;">

  </div>

  <div style="background: #2CA2B7; padding: 10px; border-radius: 50px; text-align: left; position: absolute; width: 20%; height: 15px;">

    Item1

  </div>

  <div style="background: #D0CECE; padding: 10px; border-radius: 50px; text-align: left; right: 0%; position: absolute; width: 60%; height: 15px;">

    Name1

  </div>

</div>

Answer 1

我不太了解您要做什么。但是您可以为绝对位置的div赋予特定的顶部-像这样

  <div style="background: #F2F2F2; padding: 10px; border-radius: 50px; position: absolute; width: calc(100% - 30px); height: 15px;">

  </div>

  <div style="background: #2CA2B7; padding: 10px; border-radius: 50px; text-align: left; position: absolute; width: 20%; top: 50px; height: 15px;">

    Item1

  </div>

  <div style="background: #D0CECE; padding: 10px; border-radius: 50px; text-align: left; right: 0%; position: absolute; width: 60%; top: 100px; height: 15px;">

    Name1

  </div>

Answer 2

如果要将每个div分别显示在单独的一行上并在彼此下面，则不应使用position: absolute;。您可以使用margin-top: 15px将它们彼此分开。为了使用position: absolute;，您需要定义顶部，左侧，底部或右侧中的至少一个。

Answer 3

通过在每个相对div上以+ 50px的增量添加margin-bottom：50px来解决。

如下所示。

<div style="position: relative; margin-bottom:150px;" class="projectSidebarSelectedProjectInformation-Stats">

Answer 4

您的父div的高度都为0，这是因为其所有子级都处于绝对位置，因此它们不占用任何空间。

一个解决方案是在父div上增加高度... 甚至可以使它们ALTER并从子级中删除绝对位置。

排名相对Divs，彼此之间包含绝对Divs

4 个答案: