如何在图片左上角叠加一层文字_html/css_WEB-ITnose

本帖最后由 wealsh 于 2013-11-14 21:34:47 编辑

<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"    style="max-width:90%" 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;

这个里面，加个这东西试试呗，具体多少数值，可能需要改动，试试是不是你要的效果呢

2个放在同一个层次的绝对定位对象
左上角坐标同为 0 0

绝对定位 定义一个图层 左上角 left:0 top:0就行了

能否在我贴出来的代码上修改？

定位哇，，外层position，relative，，，内层pisition，absoulute，，，

相对定位。。。
containter层  用 position:relative
cell层  用  position:absolute; top :0px; left:0px