Почему мой дочерний div выходит из родительского div

Question

Я установил позицию родительского div как относительную, а child 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

Ваш DIV с ID цыпленком имеет высоту, которая меньше, чем «куриное название», поэтому он переполняется через край.

Если вы установили высоту в элемент «div # chicken», заголовок «chicken-title» появится, как вы ожидаете.

Например:

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

Примечание добавление свойства мин-высота.

Вот ссылка на отредактированную версию вашего jsfiddle:

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