<!--
Title:图片的定位
Description:1、图片的定位 2、堆叠顺序的用法
@Copyright:
@Company:
@autor:firefly
@version:1.0
@time:2012.12.18
-->
<html>
<head>
<title>测试堆叠</title>
<style type="text/css">
.pile1{left:2in; width:3in; position:absolute; top:2in; height:3in}
.pile2{left:3in; width:1in; position:absolute; top:2in; height:1in}
/*这里的in是inch(英寸)的意思,此外还可以用cm,mm等表示距离问题。当把位置给固定后,重叠的东西哪个在上面,
哪个在下面,可用下面的z-index来表示*/
</style>
</head>
<body>
<img class="pile1" id="image" style="z-index:1" src="images/3.jpg" alt="图片3"/>
<!--可用此方法制作立体效果z-index后面是整数-->
<div class="pile1" id="text" style="z-index:3" color="#fff">
<font size="3" color="red"><b>将覆盖在图片上。</b></font>
</div>
<img class="pile2" id="image" style="z-index:2" src="images/4.gif" alt="图片4"/>
</body>
</html>