css布局有关问题

css布局问题
最近在修改项目前端页面，想实现在一个张230*230图片的右下角添加另一个64*64小图片
写了css但是在不同分辨率的机器上显示不正常。
css文件

Assembly code

#aside-userSpace .userPhoto{  margin-top: 21px;  padding: 10px;  border-radius: 7px 7px 0px 0px;}.userPhoto img{  width: 230px;  height:230px;}.addnew {    font-family: Arial;    font-size: 20px;    font-weight: bold;}.blue-button-addnew{    cursor: pointer;    background: url("../images/blue-button.png") repeat-x scroll 0 0 transparent;     display: block;    height:20px;    width:10px;    line-height:20px;    border: 1px solid #006DAB;     color: #ffffff;     padding: 0 8px 0 6px;    position: absolute;    top: 404px;    right:192px;    border-radius: 4px 4px 4px 4px;}

HTML code

<div class="userInfo">                  <div class="userPhoto">                     <a href="#" namecard="true" uid="${user.uid}">                                         <img alt="" src="${RESOUCE_STATIC_URL}/images/avatar_64_64.png">                                                                          <img alt=""src="${RESOUCE_UPLOAD_URL}/${user.mugshot256}">                                                                                                                      <a class="follow-action blue-button-addnew" title="加关注" style="${styleFollow}" uid="${user.uid}" ><span class="addnew">+</span></a>                     </a>                  </div>

CSS code

#aside-userSpace .userPhoto{  margin-top: 21px;  padding: 10px;  border-radius: 7px 7px 0px 0px;  position:relative;}.userPhoto img{  width: 230px;  height:230px;}.addnew {    font-family: Arial;    font-size: 20px;    font-weight: bold;}.blue-button-addnew{    cursor: pointer;    background: url("../images/blue-button.png") repeat-x scroll 0 0 transparent;     display: block;    height:20px;    width:10px;    line-height:20px;    border: 1px solid #006DAB;     color: #ffffff;     padding: 0 8px 0 6px;    position: absolute;    bottom: 0;    right:0;    border-radius: 4px 4px 4px 4px;}