要想在图片上叠加其他标签,例如加一些文字或者表格,直接用position属性的relative(相对)以及absolute(绝对)是最简单的。
代码如下:
父级div使用了position: relative;后,子级div的position: absolute;效果就是针对父级的。如果父级div不设置position: relative;,则子级div的position: 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;效果是针对窗口的。