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

Question

我正在努力适应位置：绝对div的内部位置：相对父母。在我的情况下：绝对div是动态生成的。我想扩大位置：基于位置的相对div：绝对div。

以下是示例

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在上面的例子中，div＃one没有高度和宽度，所以div＃4重叠div＃2。我想div＃4应该在div＃3之后坚持。

我搜索了一个答案，我无法从网上得到任何答案。 任何人都可以回答这个问题！

Answer 1

这是你想要的吗？

#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上添加填充左侧，或者在#two和#three上添加左侧边距，或者将这些放在相对位置而不是绝对位置，并保留left: 50px;

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

Answer 2

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

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