html - css - 相对 DIV 没有高度

Question

我不明白我的代码有什么问题。我的意思是，section 元素有高度，我的 DIV 元素的显示值肯定是 block ，我真的不知道它是如何工作的，也不知道如何将这两个元素组合到不同的位置。请给我您的解决方案和建议，以便今天学习新知识。

div {
  position: relative;
  margin: 0 30%;
}

div section {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 100px;
  background-color: yellow;
}

hr {
  height: 2px;
  background-color: blue;
}

<div>
  <section></section>
</div>

<hr>

Answer 1

你希望你的 hr 位于第一个 div 的底部，对吧？

但是，这不起作用，因为父 div 具有默认的 height: auto 属性。
这意味着父级 div 将具有他的子级的高度。
当您为 child 设置 position: absolute 时，您正在破坏这个系统。
parent 将不再照顾他的 child 。

所以，如果你想让它起作用，你有两个解决方案:
- 在父 div 上设置自定义高度(height: 100px)(不好)
- 删除子部分的绝对位置(默认:position: relative)

div {
  position: relative;
  margin: 0 30%;
}

div section {
  height: 100px;
  background-color: yellow;
}

hr {
  height: 2px;
  background-color: blue;
}

<div>
  <section></section>
</div>

<hr>