使用CSS在图像上显示文本

Question

首先，我想说我是CSS的新手。 在不改变我的大量代码的情况下，我想在图像上添加文本。 我目前的代码是：

#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"><a href="#">Some text</a></h2>
	  <p class="stats">text</p>
    </div>
  </div>
</div>

我尝试添加一些我从谷歌发现的代码，但是当我使用绝对位置时，文本出现在网站的顶部。相对而言，文本位于图像下方，但不在图像之上。

任何可以帮助我的人？​​

Answer 1

将position: relative用于封闭图像的块，并在为其分配类之后使用position: absolute。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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"><a href="#">Some text</a></h2>
      <p class="stats">text</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

也许是这样

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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"><a href="#">Some text</a></h2>
	  <p class="stats">text</p>
        </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;