在图片上叠加文字的简单方法

要想在图片上叠加其他标签，例如加一些文字或者表格，直接用position属性的relative（相对）以及absolute（绝对）是最简单的。
代码如下：

<div style="border: 1px solid blue; width: 600px;height: 300px;float: left;overflow: auto;position: relative;">
  <div style="border: 1px solid yellow; width: 300px; height: 300px;float: left;">
    <img alt="" src="canvas/rabbit.jpg">
  </div>
  <div style="border: 1px solid red; width: 200px;height: 300px;left: 0px;position: absolute;">
    <table id="t" width="95%" border="1px" cellpadding="0" align="center" cellspacing="0">
    </table>
  </div>
</div>

父级div使用了position: relative;后，子级div的position: absolute;效果就是针对父级的。如果父级div不设置position: relative;，则子级div的position: absolute;效果是针对窗口的。