html - 绝对定位图像是相对于绝对定位父级定位的

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>

让它相对于 supparent 定位的技巧是什么

Answer 1

根据定义:from MDN

The absolutely positioned element is positioned relative to nearest positioned ancestor (non-static). If a positioned ancestor doesn't exist, the initial container is used.

查看带有一些边框颜色的更新。父级设置为 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>