以上是实现将logo图片按照相对位置覆盖在另一张图片上的代码。
通过学习,我学到了以下方法:
将第二张图片定位到第一张图片上。
下面是简单的实现:(假设图都是100*100的)
<style>
* {margin:0;padding:0}
div {position:relative;width:500px; heigth:500px; background:#ccc;}
img {display:block;}
//第一种
#img2 {position:absolute; top:0px; left:0px;}//绝对定位,脱离文档流,这样就可以让第二张图片覆盖到第一张上了。
//第二种
#img1 {position:absolute; top:0px; left:0px;z-index:1;}
#img2 {position:absolute; top:0px; left:0px;z-index:11;} //第二种方式,是样第二张的层级高出第一张,这样也可以实现题目要求。
</style>
<body>
<div>
<img src='1.jpg' id='img1' />
<img src='2.jpg' id='img2' />
</div>
</body>