绝对定位图像相对于绝对定位父母定位

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

根据定义：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>