jquery zoom是一款图片放大插件，经常用在商城商品页面里。
使用JQuery zoom插件，除了需要引入JQuery.js外，还要引入JQuery.zoom.js文件及jqzoom.css文件
<link rel="stylesheet" href="css/jqzoom.css" type="text/css" media="screen">
<script type="text/javascript" language="javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom.min.js"></script>下面是要操作的图片节点
<div class="jqzoom"><img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg"></div>最后加上初始化的js代码，不出意外就成了
$(document).ready(function(){
$(".jqzoom").jqueryzoom();
});但事情总不会这么顺利，这个问题害我忙活了半天，搞的我还以为jquery.zoom.js文件有错呢，结果把整个js文件研究了一遍，好在代码不多，用chrome调试运行一遍还是能看的懂得。
问题是这样的，当放大镜放大图片时，应该在原来的图像旁边创建一个div显示，可到我这里，这个div却偏离了原图几百个像素，图片在左上角，放大后却跑到了右下角，也就是这个div的left和top偏了几百个像素。所以我就把代码研究了一遍，最后发现没有问题，而且我也大概知道了问题的原因，下面的图是我根据代码的意思画的图
这个是jquery.zoom.js里面用来为这个div定位的代码
var imageLeft = $(this).offset().left;
var imageTop = $(this).offset().top;
console.log("imageLeft:"+imageLeft+",imageTop:"+imageTop);
var imageWidth = $(this).children('img').get(0).offsetWidth;
var imageHeight = $(this).children('img').get(0).offsetHeight;
noalt = $(this).children("img").attr("alt");
var bigimage = $(this).children("img").attr("jqimg");
$(this).children("img").attr("alt", '');
if ($("div.zoomdiv").get().length == 0) {
$(this).after("<div class='zoomdiv'><img class='bigimg' src='" + bigimage + "'/></div>");
$(this).append("<div class='jqZoomPup'> </div>");
}
if (settings.position == "right") {
if (imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width) {
leftpos = imageLeft - settings.offset - settings.xzoom;
} else {
leftpos = imageLeft + imageWidth + settings.offset; //452 =
}
} else {
leftpos = imageLeft - settings.xzoom - settings.offset;
if (leftpos < 0) {
leftpos = imageLeft + imageWidth + settings.offset;
}
}
$("div.zoomdiv").css({
top: imageTop,
left: leftpos
});我想对前端比较熟悉的应该知道问题出在哪里了，没错，*这个div定位应该相对浏览器才行，而我这里却是相对于父节点*。那接下来就简单多了，原来，在我这个div的祖先节点存在多个position:relative，要知道对于position：absolute；的节点，父元素如果出现relative，则是相对于父元素进行定位，否则才是相对于浏览器原点。所以为只要将这些relative去掉，或者覆盖掉，就没有问题了
