定位相对 div，包含彼此下方的绝对 div答案

【问题标题】：Position Relative Divs, Containing Absolute Divs Below Each Other定位相对 div，包含彼此下方的绝对 div
【发布时间】：2020-01-30 19:29:50
【问题描述】：

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

JSFiddle

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

每个父 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>

【问题讨论】：

您的代码无效或格式错误。例如，你有一个额外的结束 div
绝对定位是一种非常糟糕的网页布局方法。它非常不灵活，并且有更好和响应速度更快的选项。查看LearnLayout.com

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

通过将 margin-bottom:50px 以 +50px 的增量添加到每个相对 div 来解决。

如下所示。

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

【讨论】：

最好让它们显示：flex 并从子项中移除绝对定位..

【解决方案4】：

您的父 div 的高度都为 0，因为他们所有的孩子都是绝对定位的，所以它们不占用任何空间。

解决方案是向父 div 添加高度... 或者甚至更好地使他们成为display: flex 并从孩子身上移除绝对定位。

【讨论】：