如何在图片左上角叠加一层文字

<style>

.autosf {

	width:170px;

	overflow:hidden;

	white-space:nowrap;

	text-overflow:ellipsis;

	-o-text-overflow:ellipsis;

	-icab-text-overflow: ellipsis;

	-khtml-text-overflow: ellipsis;

	-moz-text-overflow: ellipsis;

	-webkit-text-overflow: ellipsis;

}

.wheelplayer_box{ overflow:hidden; clear:both; width:100%;}

.wheelplayer_box ul{ width:100%; height:150px; overflow:hidden; text-align:center;}

.wheelplayer_box ul li{ width:170px;height:120px;float:left; display:none; text-align:center; margin: 0 11px;}

.wheelplayer_box ul li img{ display:block; margin:0 auto 5px; width:170px; height:120px; border:none;}



</style>





<div id="radio_show" class="wheelplayer_box">

<ul>

  <li style="display: list-item;"><a href="#" title="" target="_blank">

    <img width="180" height="120" alt="" src="http://127.0.0.1/test.jpg"><div id="sff" class="autosf">{title}</div></a>

  </li>

</ul>

</div>

以上的代码是用来显示，现在想在图片显示后 在它的左上角添加文字，也就是再添加一个层？如何实现？


或实现以下这种效果

------解决方案--------------------

.autosf {

margin-top: -120px;

margin-left: -60px;

这个里面，加个这东西试试呗，具体多少数值，可能需要改动，试试是不是你要的效果呢
------解决方案--------------------
<style type="text/css">
   #text_img{position：absolute；}
   #text{position：absolute；top：50px；left：20px；}
<style>


<div id="text_img">
    <div id="img">
    <img src="img.png">
    </div>
    <div id="text">
     img
    </div>
</div>
------解决方案--------------------
2个放在同一个层次的绝对定位对象
左上角坐标同为 0 0


------解决方案--------------------
绝对定位 定义一个图层 左上角 left:0 top:0就行了
------解决方案--------------------
定位哇，，外层position，relative，，，内层pisition，absoulute，，，
------解决方案--------------------
相对定位。。。
containter层  用 position:relative
cell层  用  position:absolute; top :0px; left:0px