このdivはどのような例ですか？

Question

Here is the jsfiddle私の質問を説明する。

浮動小数点型のdivに高さがありません（.card）。画像にネストされたdiv（.image）が含まれています。イメージは、.cardの境界ボックスを展開してイメージをラップします。 I .imageに兄弟として.card内部の巣秒のdiv（.text）をし、画像の上に.textを配置するために、負のマージントップを使用して、画像がもはや.cardのバウンディングボックスを展開して管理ししかし

、画像の下部に一致するようにします。 .cardのボトム境界は、上に這い上がり、.textのボトム境界に続きます。

.textが存在する場合、画像がgrand-parentの展開に成功しないのはなぜですか？

<div class="card"> 
    <div class="image"> 
    <img src="https://dl.dropboxusercontent.com/u/55892413/jsfiddle/image.jpg" width="200px"></div> 
</div> 
<div class="card"> 
    <div class="image"> 
    <img src="https://dl.dropboxusercontent.com/u/55892413/jsfiddle/image.jpg" width="200px"></div> 
    <div class="text"></div> 
</div> 

img { 
    display: block; 
} 

.card { 
    border: 1px solid black; //shows where the bounding-box of this div is 
    width: 200px; 
    position: relative; 
    float: left; 
} 

.text { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    margin-top: -120px; 
    position: relative; 
} 

Answer 1

あなたのポイントを得るのが間違っていない場合は、絶対位置がありません：絶対的です。

親divが相対、内部要素絶対の場合にのみ、内側要素の位置を固定することができます。

あなたは相対的な間違った方法で位置を.card（親）の内側（子）.TXT使用しようとしているため、この問題が発生して更新しました。あなたがポジションを使用しているときはいつでも、親は相対的でなければならず、子は絶対的なものになるので、子供はフローを破ることなく親コンテナ内を移動します（あなたのケースでは、親divに影響を与え、 ：絶対的な子供にして、あなたは簡単に.txtクラスを使用することができます。

position: relative;to position: absolute;を.textクラスに変更するだけで完了です。

here