html – How to make text overlay a div with image?

Question:

I can't make the text "Text I want to overwrite." stand on top of the "textDiv" div that has a background image, help me please.

HTML

<div class="divLeft">
    <img id="photo" src="photo.png">

    <div class="textDiv">
        <h2><i id="spaceText" class="fas fa-search"></i>Texto que quero sobrepor.</h2>
    </div>
</div>

CSS

.divLeft {
    width: 49.5%;
    height: 949px;
    float: left;
}

#spaceText {
    padding-right: 16px;
}

#photo {
    width: 1600px;
    height: 949px;
}

Answer:

Put position: absolute in the div .textDiv and position: relative in the div .divLeft . Then you position it however you want with top and left .

Remembering that the image is not a background , it is just a normal image and you will be placing a layer (the div .textDiv ) on top of it.

.divLeft {
    width: 49.5%;
    height: 949px;
    float: left;
    position: relative;
}

#spaceText {
    padding-right: 16px;
}

#photo {
    width: 1600px;
    height: 949px;
}

.textDiv{
   position: absolute;
   top: 0;
   left: 0;
   
   /*cor apenas para exmplo*/
   color: #fff;
}

<div class="divLeft">
    <img id="photo" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">

    <div class="textDiv">
        <h2><i id="spaceText" class="fas fa-search"></i>Texto que quero sobrepor.</h2>
    </div>
</div>