0

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

neophyte
  • 6,540
  • 2
  • 28
  • 43
Piyush Sharma
  • 113
  • 1
  • 8
  • 1
    Possible duplicate of [Position absolute but relative to parent](http://stackoverflow.com/questions/10487292/position-absolute-but-relative-to-parent) – Troyer Jan 30 '17 at 10:02

1 Answers1

2

By definition: 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.

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>
caramba
  • 21,963
  • 19
  • 86
  • 127
  • yup my confusion is that why image is getting 10% offset from top and left.but I have set top and left offset to 0 it should be touch the left and top border – Piyush Sharma Jan 30 '17 at 10:04