实习小结三：关于背景图片的相对和绝对位置

图中的1,2,3排名小图标都是从大图中通过position抠取的，在依次添加小图标的过程会遇到logo大图的位置移动，为了使得排列整齐，小图标采用绝对位置即可。

给出html代码：此处的class中的no是父类，在css中可以合并共有的代码。

<div class="image2">
	<div class="no1 no"></div>
      	<img src="http://static.hostucan.wn/image/bestidc/brand1.png"/>
</div>
<div class="image2">
      	<div class="no2 no"></div>
      	<img src="http://static.hostucan.wn/image/bestidc/brand1.png"/>
</div>
<div class="image2">
      	<div class="no3 no"></div>
      	<img src="http://static.hostucan.wn/image/bestidc/brand1.png"/>
</div>

给出css代码：

.no{
	position: absolute;
    background:url(http://static.hostucan.wn/image/bestidc/icon.png)；
    height:32px;
	width:30px; 
	margin-left: 10px;
}
.no1{
    background-position:-25px -110px;

}

.no2{
    background-position:-25px -157px;
}

.no3{
    background-position:-25px -207px;
}

效果图：

更新版本：

自制排名图标形状：

css代码：

.rk.rk1 {
background: #C10037;
border: 5px solid #C10037;
border-bottom: 5px solid #FFF;
width: 0;
border-left-width: 10px;
border-right-width: 10px;
}