Vertical centering with relative and absolute positioning in flexbox

I'm using absolute and relative positioning for my box, but as you can see the text doesn't seem like it's top: 100%. Can someone explain why this is? Like why is the text ('some text is going here' text) spilling into the child element when top: 100% was specified? .box { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; height: 200px; margin: 0 auto; width: 90%; border: 1px solid red; } .child { position: relative; width: 100px; height: 100px; border: 1px solid orange; } .childschild { position: absolute; top: 100%; left: 50%; transform: translate(-50%, -50%); } <div class="box"> <div class="child"> <img src="dog1.jpg" alt="Picture of a dog" width="250" height="250"> <div class="childschild"> some text is going here </div> </div> <div class="child">dfd</div> <div class="child">dfd</div>