原文部分地方有些问题。在最后博主附上了修正代码。
jQuery ZeroClipboard支持在多种浏览器中复制内容到剪贴板，IE、Firefox、Chrome等等都不在话下。其本身作为jQuery的一个插件封装了Zero Clioborad，其实现原理就是在要点击的按钮或链接上覆盖一个透明的Flash，实际上用户点击的是Flash，复制到剪贴板也是通过此Flash实现的。
大家用的很Happy，但是我用的时候发现点击按钮没有反应，后来发现是Flash出现的位置不对，可能原作者写的时候没有在复杂的样式环境下测试过。Flash的位置是动态设定的，找到其源码查看，发现一处可能有问题的地方：
getDOMObjectPosition: function (obj, stopObj) {
// get absolute coordinates for dom element
var info = {
left: 0,
top: 0,
width: obj.width ? obj.width : obj.offsetWidth,
height: obj.height ? obj.height : obj.offsetHeight
};
if (obj && (obj != stopObj)) {
info.left += obj.offsetLeft;
info.top += obj.offsetTop;
}
return info;
},
注意下边这两句：
info.left += obj.offsetLeft;
info.top += obj.offsetTop;
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素；obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。实际测试获取到的是相对于上层控件的位置。
但是在创建浮动层的时候，定位方式使用了absolute，同时设置top，left为上边的值：
// create floating DIV above element
this.div = document.createElement('div');
this.div.className = "zclip";
this.div.id = "zclip-" + this.movieId;
jQuery(this.domElement).data('zclipId', 'zclip-' + this.movieId);
var style = this.div.style;
style.position = 'absolute';
style.left = '' + box.left + 'px';
style.top = '' + box.top + 'px';
style.width = '' + box.width + 'px';
style.height = '' + box.height + 'px';
style.zIndex = zIndex;
实际测试是到页面上方和左侧的距离。这样就是将相对于上层控件的位置应用为了相对于整个页面的位置，所以Flash没有出现在按钮的位置。
既然明确了这个问题，那获取按钮位置的时候我们就换一种方法，因为使用了jQuery，直接上Jquery的方法既可以了：
getDOMObjectPosition: function (obj, stopObj) {
// get absolute coordinates for dom element
var info = {
left: 0,
top: 0,
width: obj.width ? obj.width : obj.offsetWidth,
height: obj.height ? obj.height : obj.offsetHeight
};
if (obj && (obj != stopObj)) {
// 修改了这里
//info.left += obj.offsetLeft;
//info.top += obj.offsetTop;
info.left += $(obj).offset().left;
info.top += $(obj).offset().top;
}
return info;
},
对于浏览器对CSS的解析不是很了解，此方案仅适合遇到这个问题的朋友尝试下，可能最终原因还不是这个，因为貌似大家一直用的挺好
最后附上插件地址：https://github.com/patricklodder/jquery-zclip
博主曰：
我的项目里由于添加了
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<%@ include file="../../header.jsp"%>
<%@ include file="../subviews/sprovider_left.jsp"%>
</nav>
<div id="page-wrapper">
<%@ include file="../subviews/sprovider_service_components_info_content.jsp"%>
</div>这部分代码，导致透明Flash按钮的上下错位。同事在看了原博主的文章后修改修改如下
getDOMObjectPosition: function (obj, stopObj) {
// get absolute coordinates for dom element
var info = {
left: 0,
top: 0,
width: obj.width ? obj.width : obj.offsetWidth,
height: obj.height ? obj.height : obj.offsetHeight
};
if (obj && (obj != stopObj)) {
// info.left += obj.offsetLeft;
// info.top += obj.offsetTop;
// obj = obj.offsetParent;
// 解决flash定位不准问题
info.left += $(obj).offset().left;
info.top += $(obj).offset().top;
obj = $(obj).offset().parent;
}最后多了一句obj = $(obj).offset().parent; 问题解决。
