为什么我的子 div 离开父 div答案

【问题标题】：Why my child div get out of parent div为什么我的子 div 离开父 div
【发布时间】：2016-09-12 00:06:36
【问题描述】：

我将父 div 的位置设置为相对位置，而将子 div 的位置设置为绝对位置。我打算把孩子放在父母的右上角。但是孩子离开了父母。有人可以告诉我发生这种情况的原因以及如何解决它。

* {
  box-sizing: border-box;
  border: 1px solid black;
}
div#chicken {
  position: relative;
  padding: 0;
  background-color: yellow;
}
#chicken-title {
  position: absolute;
  right: 0px;
  top: 0px;
  margin: 0px;
  background-color: red;
}

<div id="chicken">
  <h3 id="chicken-title">chicken</h3>
</div>

【问题讨论】：

当绝对定位的子级从文档流中移除时，父级崩溃。由于该父 div 没有其他内容，因此它实际上缩小为空。子元素出现在父元素的右上方。

标签： html css position

【解决方案1】：

ID 为 chicken 的 div 的高度小于“chicken-title”，这就是它溢出边缘的原因。

如果您为“div#chicken”元素设置高度，“chicken-title”将按照您的预期显示。

例如：

div#chicken {
position: relative;
padding: 0;
background-color: yellow;
min-height: 200px;
}

注意添加了 min-height 属性。

这是您的 jsfiddle 的编辑版本的链接：

https://jsfiddle.net/wb878L7g/2/

【讨论】：

谢谢，乔希！有用。我想知道有没有什么方法可以做一些设置来获得默认情况，即父 div 的高度大于其所有子元素的总和？
我相信如果您使用百分比，默认情况下块类型元素就是这样。例如，两个高度为 100% 的子 div 仍包含在其父 div 中，高度为 200px 或其他东西。但是由于 chicken-title 元素是绝对定位的，我认为你需要显式声明父元素的高度。