使用定位是元素一部分消失？

Question

两个a标签设置同样的样式，为什么右边的一部分小图标显示不出来？

<div class="comment-sort">
         <a href="" title="时间排序">时间排序</a>
         <a href="" title="推荐排序">
         推荐排序 <span class="new"></span></a>
/div>
.comment-sort {
  float: right;
  position: relative;
  font-size: 0;
  margin-right: 8px;
  margin-top: 4px;
}
.comment-sort a {
  position: relative;
  font-size: 12px;
  color: #000;
  padding: 0 20px 0 5px;
  line-height: 20px;
  border: 1px solid #cdcdcd;
  background: url(../images/desc/sort.png) 57px center no-repeat;
}
.comment-sort .new {
  position: absolute;
  width: 27px;
  height: 14px;
  top: -14px;
  right: 6px;
  background: url(../images/desc/new.png) no-repeat;
}

Answer 1

可能是因为你在用relative定位的同时还用了向右浮动，浮动以后“推荐排序”文字右边的部分背景就不显示了，你可以去掉float，用right进行相对定位，这样就能够显示出来了。

Answer 2

第二个a标签后面那个

    <span class="new"></span> 

把a标签的背景给遮住了，所以就看不到，它去掉就可以看到了