为什么我的孩子div离开父div

Question

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

代码在此链接中：https://jsfiddle.net/wb878L7g/

* {
  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>

Answer 1

你的鸡肉ID高于鸡肉标题＆＃34;这就是它溢出边缘的原因。

如果您将高度设置为＆＃39; div＃chicken＆＃39;元素，鸡冠标题＆＃39;会出现你的预期。

例如：

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

请注意添加min-height属性。

以下是jsfiddle编辑版本的链接：

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