Help: Positioning a div box on top of an image in a list

I’m finding it difficult aligning a div block to the position of choice. Like I want to align the div box container the text to the bottom of the image. I have used absolute positioning now, but it is not working well if I use the presets positioning on all different screens. Positioning relative- that I don’t understand, because it moves the image instead being on top of it. Please see my public link below:

https://webflow.com/design/gloss?preview=7e5c7281c65b29e309cdc3227d65f4a7

@topelovely is this what you want to achieve ?

or this

Yeah the last one. Thanks Pastiwibawa. So what should I do?

@topelovely first make your element structure in navigator like shown on image below

See all of your imginside must be on top of narrator wraper.

Then I set narrator wrapper Display: block, Position: auto and Top Margin: -54px

Cheers