css的position-relative兼容问题与解决办法

   position:relative在css设计中有着居住轻重的作用，如果你还没有用过它那么真是巨大的遗憾，以前做过div title提示框的时候有个箭头定位问题，当时的解决办法就是多套用一层div并且留白一定大小，用来背景显示箭头，但是发现箭头永远在下面，没有办法遮盖主体融合的部分，所以效果也就不好，当然，聪明的您可能已经有更好的解决办法了，用position:absloute又不能完全解决问题，每次要定位实在是一件麻烦的事情，分辨率调整等等都要重新计算，也影响性能，position:relative就是一个最好的解决办法，至于用法很简单，网上很多，在此就不再累述。

   但是实际使用中发现一个兼容性的问题，position:relative是指针对上级目录的相对决定定位，他是浮动在页面上的，但是相对父级是占有空间的，实验证明他们的top属性针对的对象不一致：firefox chome IE7、8等不会出问题，就是针对他的直接parent y坐标定位，但是遨游、腾讯等ie内核的包装浏览器就会不一样，他们针对的是书写位置的上一个直接对象，这样做出来的浮动层在浏览器下就不兼容了，y坐标不统一（估计IE6也会有这样的问题，没有测过）。有人可能说这些非主流浏览器还顾及他们干什么，须不知国内有多少用户使用的是包装ie内核的浏览器，而非ie本身，做程序的不能存在这种侥幸心理。

    看清楚问题所在解决办法就很简单了，将需要relative的元素插在parent元素的最前面，这样就css统一了，如果你是用的是jquery的话，那么prepend就是干这个的，很方便。

    但是这样做又有一个新的问题，正因为元素是相对绝对定位的（对于父页面相对，而且占有空间，对于父的兄弟是绝对的，可以覆盖），所以relative后面的部分会被推挤下去，这样虽然标准统一了，但是这个位置还是会让布局变形。

    可以这样解决：比如有如下一个relative定位层：<div class='Lodding'></div>，Lodding定位是relative的，可以在他外面再套嵌一层div：

         <div style='float:left;'><div class='Lodding'></div></div>

    然后再把这一块附加到需要覆盖定位的文档内部最后边，再用top属性向上或者left向左偏移就可以了，这样还是可以兼容的情况下完成完美定位。