css - 当相对父项没有高度和宽度时，如何将绝对子项定位在相对父项中？

Question

我正在尝试将 position:absolute div 放入 position:relative parent 中。在我的例子中，position:absolute 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

将 top 和 left 值添加到第四个相对定位的对象。

#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>