How to group text with image

Question

Problem: I created a modal to display some information and text about the image. I’m not getting the text to be in front of the image.

Solution: Leave text in front of the image. This image is loaded as soon as it opens the page.

HTML/CSS:

.corpoModal {
width: 900px;
float: left;
position: relative;
}

#textoImagem {
padding: 16px;
}
#imagem {
width: 900px;
}

.texto-modal {
position: absolute;
top: 0;
left: 0;
/*cor apenas para exmplo*/
color: #ff0000;
}

     <!--Modal: Produto em liquidação-->
    <div class="modal fade" id="produtoLiquidacao" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">

            <!--Content-->
            <div class="modal-content">

                <!--Body-->
                <div class="modal-body mb-0 p-0 corpoModal">

                    <div class="texto-modal">
                        <h2 id="textoImagem">Texto Aqui</h2>
                    </div>

                    <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">

                        <img id="imagem" src="~/assets/img/product/promocoes.jpg" style="width: 900px;"/>
                    </div>

                </div>

                <!--Footer-->

            </div>
            <!--/.Content-->

        </div>
    </div>

Imagery: