html - 为什么我的 child div 离开父 div

Question

我将父 div 的位置设置为相对位置，将子 div 设置为绝对位置。我打算把 child 放在 parent 的右上角。但是 child 离开了 parent 。谁能告诉我发生这种情况的原因以及解决方法。

代码在此链接中: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 为 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/