如何将图像放在 div 上并将此图像从 div 响应中移出？

问题描述

如下图所示，我想在滑块的 div 上放置一个图像，并且该图像的大小会相应地调整并且不会改变底部的位置。

图片是<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 -->

我没有 css，没有想法。谢谢你的帮助

解决方法

通过添加解决问题：

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