Html 为什么我的孩子要离开父母部门

我将父div的位置设置为相对，子div的位置设置为绝对。我打算把孩子放在父母的右上角。但孩子们却摆脱了父母。 有人能给我一个原因，为什么它发生，以及如何修复它

代码位于此链接中：

*{
框大小：边框框；
边框：1px纯黑；
}
小鸡{
位置：相对位置；
填充：0；
背景颜色：黄色；
}
#鸡名{
位置：绝对位置；
右：0px；
顶部：0px；
边际：0px；
背景色：红色；
}

鸡

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

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

例如：

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

请注意添加了“最小高度”属性

下面是一个链接，指向您的JSFIDLE的编辑版本：

---

当绝对定位的子文档从文档流中移除时，父文档将折叠。由于父div没有其他内容，它实际上收缩为零。子元素出现在父元素的右上方。谢谢，Josh！它起作用了。我想知道是否有什么方法可以进行一些设置以获得默认情况，即父div的高度大于其所有子div的高度之和？我相信如果使用百分比，默认情况下块类型元素就是这样的。例如，两个高度为100%的子div仍然包含在其父div中，例如高度为200px或其他。但是由于chickenthile元素是绝对定位的，我认为您需要显式声明父元素的高度。