絶対配置された画像は絶対配置された親に対して位置決めされています

Question

絶対配置された子画像が親に対しても絶対的にオフセットを取得している理由を理解できません。しかし、定義によってそれは相対的な、最も近い祖先

.supparent { 
 
    width:100%; 
 
    height:300px; 
 
    position:relative; 
 
} 
 

 
.parent { 
 
    position:absolute; 
 
    top : 10%; 
 
    left:10%; 
 
} 
 

 
.im { 
 
    position:absolute; 
 
    top:0%; 
 
    left:0%; 
 
}

<div class="supparent"> 
 
    <div class="parent"> 
 
     <img src="https://tpc.googlesyndication.com/simgad/2621399702091823008" class="im"> 
 
    </div> 
 
</div>

に対する位置すべきであると定義することにより

Answer 1

をsupparentに関してそれにポジションを作るためのハックです：from MDN

は、

絶対配置された要素は、祖先に最も近い位置にある （非静的）。配置された祖先が でなければ、最初のコンテナが使用されます。

ボーダーカラーでこのアップデートをご覧ください。親がposition: relative;またはposition: absolute;を設定されている場合、それは問題ではありません

.supparent { 
 
    width:100%; 
 
    height:300px; 
 
    position:relative; 
 
    
 
    border: solid 5px orange; 
 
} 
 

 
.parent { 
 
    position:absolute; 
 
    top : 10%; 
 
    left:10%; 
 
    
 
    border: solid 5px red; 
 
} 
 

 
.im { 
 
    position:absolute; 
 
    top:0%; 
 
    left:0%; 
 
    
 
    border: solid 5px green; 
 
}

<div class="supparent"> 
 
    <div class="parent"> 
 
     <img src="https://tpc.googlesyndication.com/simgad/2621399702091823008" class="im"> 
 
    </div> 
 
</div>