position定位使用理解

        从前端那边拿到一份稿件，发现其中一个模块，使用大量的position定位，虽然没有错位，但是总觉得没有必要使用，因为我之前自己有写过一段时间的前端开发，所以我考虑了下把大部分的都注释掉了，但是有个鼠标经过的特效也是用定位，可是他的电脑展示的刚好是在小图标正上方，等到了我电脑发现却右移了很多像素！！

        刚开始以为是inline行内化的原因，后来经过多方排除，发现竟然不能吧relative放在需要定位absolute的标签的上上上级父元素里头，而是他的直接上级父元素才不会出问题。下面贴下原先的错位图片：

        后来经过调整后，也发了两位同事电脑测试，完全正常，图片如下：

我自己电脑测试结果

同事电脑测试结果

        那么我贴下同事那边写的代码片段：

html代码片：

<div class="lsjs_xxy">
			  <div class="lsjs_xxy1">
                  <a href="#">小小小</a>
                  <div class="honor">
                    <div class="rz">
                      <img src="style/images/fxt.jpg" />
                      <div class="fxt-bg">法信通六年</div>
                    </div>
                    <div class="rz">
                      <img src="style/images/zsrz.jpg" />
                      <div class="zsrz">xxx认证</div>
                    </div>
                    <div class="rz">
                      <img src="style/images/lxrz.jpg" />
                      <div class="lxrz">xx认证</div>
                    </div>
                  </div>
			  </div>
			  浙江星韵律师事务所<br />
              <span>手机号码：</span>158658*****<br />
              <span>执业证:</span>***********<br /> 
              <span>联系地址：</span>xxxxxxx号阳光商务大厦
			</div>

css代码片：

.lsjs_xxy{ width:212px; float:right; color:#000000; padding-top:14px; position:relative; line-height:21px; padding-right:5px; /*overflow:hidden;*/ }
.lsjs_xxy span{ color:#2c5dac;}
.lsjs_xxy img{ /*position:relative; top:5px; left:5px;*/ margin-left:5px; vertical-align:middle;/* margin-top:-3px;*/}
.lsjs_xxy1{ width:205px; line-height:22px; font-size:14px; color:#2c5dac; margin:0; font-family:"宋体"; font-weight:normal; /*position:relative;*/ }
.lsjs_xxy1 a{ color:#2c5dac;}
.lsjs_xxy1 a:hover{ color:#2c5dac;}
h3{  padding-right:5px;padding-left:10px; padding-bottom:10px; padding-top:5px; width:295px; color:#545454; margin:0; font-size:14px;
 font-weight:bold; line-height:25px;}
.honor{ display:inline; }
.rz{ display:inline; } 
.honor img{ cursor:pointer;}
.honor div.fxt-bg,
.honor div.zsrz,
.honor div.lxrz{ width:80px; height:23px; line-height:20px; background:url(images/fxt_bg.png) no-repeat center center; position:absolute; font-size:12px; 
font-size:"微软雅黑"; text-align:center; color:#fff; display:none; }
.fxt-bg{ top:-6px; left:29px;}
.zsrz{ top:-6px; left:61px;}
.lxrz{  top:-6px; left:94px;}

        经过测试发现是吧position:relative;这个放入到lsjs_xxy这个标签里头导致的，最后我的修改方案是把position:relative;这个放入到rz这个标签里头，重新修改fxt-bg等的top和left定位的。修改方案如下：

.lsjs_xxy{ width:212px; float:right; color:#000000; padding-top:14px;  line-height:21px; padding-right:5px; }

.lsjs_xxy img{ margin-bottom:-4px;}

.honor{ display:inline-block; *display:inline; }
.rz{ display:inline-block; height:21px; *display:inline; position:relative; }
.fxt-bg{ top:-23px; left:-32px;}
.zsrz{ top:-23px; left:-31px;}
.lxrz{ top:-23px; left:-33px;}