z-index

通过绝对定位可以把一个元素放在另一个元素上，这样位置就重复了。

重复了，就存在一个谁掩盖谁的问题。 这个时候就可以使用

z-index属性， 当z-index的值越大，就表示放上面，z-index:越小就表示放下面。

<style>
img#i1{
  position: absolute;
  left: 60px;
  top: 20px;
  z-index:1;
}
  
  img#i2{
  position: absolute;
  left: 60px;
  top: 60px;
  z-index:-2;
}
 
</style>
 
<div>
<p >正常文字a</p>
<p >正常文字b</p>
<p >正常文字c</p>
<p >正常文字d</p>
<p >正常文字e</p>
<p >正常文字f</p>
<p >正常文字g</p>
</div>

<img id="i1" src="https://www.baidu.com/img/baidu_jgylogo3.gif" />
<img id="i2" src="http://how2j.cn/example.gif" />

正常文字a

正常文字b

正常文字c

正常文字d

正常文字e

正常文字f

正常文字g