当相对父级没有高度和宽度时，如何在相对父级内定位绝对子级？

Question

我正在尝试适应位置：绝对 div 的内部位置：相对父级。在我的情况下，位置：绝对 div 是动态生成的。我想根据 position:absolute div 扩展 position:relative div。

这是一个例子，

#one {
  position:relative;
  background-color: pink;
}

#two {
  background-color: green;
  position: absolute;
  top:0px;
  left: 50px;
  width:100px;
  height:100px;
}

#three {
  background-color: yellow;
  position: absolute;
  top:100px;
  left: 50px;
  width:100px;
  height:100px;
}

#four {
  position:relative;
  background-color: violet;
  width:100px;
  height:50px;
}

<div id="one">
  <div id="two">First</div>
  <div id="three">Second</div>
</div>
<div id="four">Third</div>

在上面的例子中，div#one 没有高度和宽度，所以 div#four 与 div#two 重叠。我希望 div#four 应该放在 div#three 之后。

我搜索了一个答案，但我无法从网上得到任何答案。 谁能回答这个问题！

Answer 1

将顶部和左侧值添加到您的第四个相对定位的对象。

#one {
  position:relative;
  background-color: pink;
}

#two {
  background-color: green;
  position: absolute;
  top:0px;
  left: 50px;
  width:100px;
  height:100px;
}

#three {
  background-color: yellow;
  position: absolute;
  top:100px;
  left: 50px;
  width:100px;
  height:100px;
}

#four {
  position:relative;
  background-color: violet;
  width:100px;
  height:50px;
  top:200px;
  left: 50px;
}

<div id="one">
  <div id="two">First</div>
  <div id="three">Second</div>
</div>
<div id="four">Third</div>

Answer 2

这是你想要的吗？

#one {
  background-color: pink;
  padding-left: 50px;
}

#two {
  background-color: green;
  width:100px;
  height:100px;
}

#three {
  background-color: yellow;
  width:100px;
  height:100px;
}

#four {
  background-color: violet;
  width:100px;
  height:50px;
}

<div id="one">
  <div id="two">First</div>
  <div id="three">Second</div>
</div>
<div id="four">Third</div>

如果是这种情况，您就不需要#two 和#three 的绝对定位。让它们流入static（默认位置）。如果您需要它们距离#one 开头的左侧 50px，您可以在 #one 上添加一个 padding-left，或者在 #two 和 #three 上添加一个 margin-left，或者将它们放在相对位置上，而不是绝对的，并保持left: 50px;

其实你可以看到我根本没有改变任何position。默认的static 完全符合您的要求。