z-index

时间：2017-05-19 00:55:21 阅读：146 评论：0 收藏：0 [点我收藏+]

标签：bsp alt gif z-index round 问题技术分享 com .com

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

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

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" />