JQuery中弹出层位置设置

 在JQuery中，经常会用到弹出层tooltip进行信息的显示，经常会在某个标签，例如<a>或者<span>上，当鼠标放上去时，将弹出层显示在此标签的下方或者当前鼠标指针的右下方。 
   这两种都首先需要将弹出框设置在页面的最前端。虽然页面表面上是平面的，但也存在谁覆盖谁的问题，要将隐藏的弹出框显示在当前的最前端，需设置

Java代码  

1. $("tooltip").css("z-index","99")  

也就是将z轴的级别设置在最高的99 
下面介绍这两种的实现方法。 
第一种：举例：当鼠标经过时，在<a id="aaa">标签的下方显示弹出框。首先要取当前标签的坐标，是相对于整个document的坐标，通过

Java代码  

1. var offset=$("#aaa").offset();  

得到的offset有两个属性，left和top，分别是当前标签的最左和最上的坐标。如果要将弹出窗口设置在当前标签的左下方，则使用

Java代码  

1. $("#tooltip").css("left",offset.left+"px").css("top",offset.top+"px");  

当然，如果要相对于当前标签左上，偏移一定的距离，可以自己在css中加上想要的偏移量。 
第二种：当鼠标经过<a>标签，让弹出窗显示在当前鼠标指针的右下方。此方法则需要在鼠标经过时触发的函数上添加event参数，例如

Java代码  

1. $("#aaa").mouseover(function(event){XXXXX}  

，因为这样才能让浏览器监听到鼠标经过的这个event，首先定义一个事件

Java代码  

1. var myEvent=event||window.event  

之所以写这个，是因为IE和火狐对于时间监听的得到机制不一样，但以上这两种不同方式，一定能得到这个事件。然后就可以利用clientX和ClientY，来获取鼠标横纵坐标的位置了，然后添加css属性：

Java代码  

1. $("tooltip").css("left",myEvent.clientX+"px").css("top",myEvent.clientY+"px");  

将弹出框显示在鼠标右下方。