How to put image over div and this image out of the div responsive?

Question

as you can see in the following image, I want to put an image on the div of my slider and that image is resized responsively and does not change position at the bottom.

the image it's <div class="img-top">

   <section id="hero-section">  
        <div class="hero-wrapper">                      
            <div class="grid-x grid-padding-x">
                <div class="cell small-12 medium-12 large-6 full-height">

                    <div class="img-top">
                        <img src="https://localhost/app/uploads/2021/05/goku_img.png">
                    </div> 
                            
                    <div class="hero-inner">
                        <?php echo do_shortcode(get_field("section_1_left"));?>
                    </div>                              
                 </div><!-- .cell -->

                <div class="cell small-12 medium-12 large-6 full-height section1right">
                    <div class="hero-inner-right">
                        <?php echo do_shortcode(get_field("section_1_right"));?>
                    </div>                          
                </div><!-- .cell -->

            </div>
        </div>
    </section><!-- #hero-section -->

I don't have css, not have a idea. Thank you for you help

Answer 1

Solved issue by adding:

#hero-section {
   position: relative;
}
#hero-section .img-top img {
   position: absolute;
}