Абсолютное позиционированное изображение позиционируется относительно абсолютного позиционированного родителя

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

Абсолютно позиционированный элемент расположен относительно ближайшего позиционированного предка (Не статический). Если у позиционированного предка нет , используется начальный контейнер.

Посмотрите это обновление с некоторыми граничными цветами. Это не имеет значения, если родитель установлен 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>