私の子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を持つあなたのdiv要素は、それがオーバーフローする理由である、「チキン・タイトル」よりも小さい高さを持っています端を越えて

「div＃chicken」要素の高さを設定すると、予想通りに「chicken-title」が表示されます。例えば

：

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

注MIN-heightプロパティの添加。絶対位置の子供は、文書の流れから除去されると、親が崩壊

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