Text over an image with CSS - css

Question

First I want to say I am quite a newbie with CSS.
Without changing a lot of my code I would like to have text over an image.
My current code is:
#container {
width: 1010px;
margin-left: auto;
margin-right: auto;
}
#left-box {
width: 681px;
float: left;
margin-right: 29px;
}
#data {
width: 206px;
height: 140px;
background-color: #fff;
float: left;
margin-right: 10px;
margin-left: 11px;
margin-bottom: 20px;
}
<div id="container">
<div id="left-box">
<div id="data">
<img src="img/img1.jpg" />
<<<< here I want put some text, which should be over the image >>>>
<h2 class="h2-data">Some text</h2>
<p class="stats">text</p>
</div>
</div>
</div>
I tried adding some code which I found from Google, but the text is appearing at the top of the website when I use absolute as position. And with relative the text is under the image, but not OVER the image.
Anyone who can help me?

Answer 1

Use position: relative for the block enclosing the image and position: absolute for the text after assigning a class to it.
#container {
width: 1010px;
margin-left: auto;
margin-right: auto;
}
#left-box {
width: 681px;
float: left;
margin-right: 29px;
}
#data {
width: 206px;
height: 140px;
background-color: #fff;
float: left;
margin-right: 10px;
margin-left: 11px;
margin-bottom: 20px;
position: relative;
}
.text {
top: 0;
left: 100;
position: absolute;
}
<div id="container">
<div id="left-box">
<div id="data">
<img src="http://placehold.it/200x140"></img>
<div class="text">
<<<< here I want put some text, which should be over the image>>>></div>
<h2 class="h2-data">Some text</h2>
<p class="stats">text</p>
</div>
</div>
</div>

Answer 2

maybe so
#container {
width: 1010px;
margin-left: auto;
margin-right: auto;
}
#left-box {
width: 681px;
float: left;
margin-right: 29px;
}
#data {
width: 206px;
height: 140px;
background-color: #fff;
float: left;
margin-right: 10px;
margin-left: 11px;
margin-bottom: 20px;
position: relative;
}
#data img{
position: absolute; top: 0; left: 0;
}
#data .text{
position: relative;
}
<div id="container">
<div id="left-box">
<div id="data">
<img src="http://placehold.it/200x140" />
<div class="text">
<<<< here I want put some text, which should be over the image >>>>
<h2 class="h2-data">Some text</h2>
<p class="stats">text</p>
</div>
</div>
</div>
</div>