絕對定位的圖像是相對於絕對定位父母的定位

我無法理解爲什麼絕對定位的子圖像獲得其父母的偏移量，這也是絕對的。但是，顧名思義它應該相對於定位到相對最近的祖先絕對定位的圖像是相對於絕對定位父母的定位

.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>

，什麼是黑客攻擊，使其位置相對於supparent

來源

2017-01-30 Piyush Sharma

的可能的複製[位置絕對但相對父（http://stackoverflow.com/questions/10487292/position-絕對但相對於父母） – Troyer

根據定義：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>

來源

2017-01-30 10:01:15 caramba

是我的困惑是，爲什麼圖像偏離頂部和左側10％的偏移量。但我已經設置頂部和左偏移到0它應該觸摸左邊界和頂部邊界 –

oh ok我得到了我的答案，謝謝 –

絕對定位的圖像是相對於絕對定位父母的定位

回答

相關問題