CSS-div重合设置

想用纯CSS在头像后做一个简单的动画效果，想的是俩个图片重合，这样动画效果不影响前面的头像hover事件，进行框架设计时发现这样需要讲俩个div重合

Body：

<div id="img_head" >

<img src="img/首页logo.png" class="head">

</div>

<div id="img_head_back">

<img src="img/背景.png" class="back" >

</div>

 

 

CSS：

#img_head{

border: 1px solid #FF0000; 

position:absolute;

width:210px;

height: 210px;

z-index: 20;

left:600px;

top:170px;

text-align: center;

}

#img_head_back{

border: 0px solid #FF0000;

position:absolute;

width: 210px;

height: 210px;

left:600px;

top:170px;

z-index:10;

}

 

利用Z-index确定那个div在最上层

前提是position:absolute