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

I am unable to understand why the child image which is absolute positioned is getting its offset with respect to its parent which is also absolute. but, by definition it should position with respect to relative closest ancestor

我无法理解为什么绝对定位的子图像相对于其父图像也是绝对的。但是，根据定义，它应该相对于相对最近的祖先定位

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

And what is the hack to make it position with respect to supparent

什么是使它成为关于假设的位置的黑客

1 个解决方案

#1

By definition: from MDN

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

绝对定位的元素相对于最近定位的祖先（非静态）定位。如果定位的祖先不存在，则使用初始容器。

See this update with some bordered colors. It does not matter if the parent is set position: relative; or 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>

#1