jquery如何设置控件位置

1. //offset()获取当前元素基于浏览的位置  
2.  var offsettop=$("#unamespan").offset().top;   
3.  var offsetleft=$("#unamespan").offset().left;  
4.   //position()获取当前元素基于父容器的位置             
5.   var positiontop=$("#unamespan").position().top;  
6.  var positionleft=$("#unamespan").position().left;  
7.   
8. //设置panel2的位置基于unamespan的坐标  
9.  $("#panel2").css({position: "absolute",'top':offsettop+100,'left':offsetleft+50,'z-index':2});   

首先需要设置控件的position属性
    position属性规定元素的定位类型，这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
属性说明：
1 absolute:生成绝对定位的元素，相对于 static定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom"属性进行规定。

2 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left","top", "right" 以及 "bottom" 属性进行规定。

3 relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20"会向元素的 LEFT 位置添加 20 像素。

4 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left,right 或者 z-index 声明）。
5 inherit 规定应该从父元素继承 position属性的值。(ie中未支持此属性)

所有空间position的默认值为static，所以需要将其设置为其他属性 可进行定位

若有多个层 切需要设定层的层次关系 那么需要设置z-index属性

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（ position的值非static）！

说明
该属性设置一个定位元素沿 z 轴的位置，z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

示例一:

hml：
 登记时间：<select id="qCheckInTimeType" style="width:90px; height:18px;">
                 <option value="">全部</option>
                 <option value="0" selected="selected">今天</option>
                 <option value="1">昨天</option>
                 <option value="2">前天</option>
                 <option value="21">最近三周</option>
                 <option value="7">最近一周</option>
                 <option value="5">自定义</option>
              </select>
              <div  class="Time" id="Time">
                  <div style="border:2px solid #A4AFD0; background-color:#EDEFF8; width:240px">
                      <span>从</span>
                         <input id="qCheckInTimeStart"  style="width:90px"/>
                       <span>到</span>
                          <input id="qCheckInTimeStop"  style="width:90px;"/>
                   </div>
                 </div> 
javascript：
 //offset()获取当前元素基于浏览的位置   
        var offsettop = $("#qCheckInTimeType").position().top;
        var offsetleft = $("#qCheckInTimeType").position().left;
        //设置panel2的位置基于unamespan的坐标   
        $(".Time").css({ position: "absolute", 'top': offsettop + 16, 'left': offsetleft -5, 'z-index': 2 });
示例二：

html：
 <td id="rSTATUS" width="80px">状态<img class="statusTip" src="../images/Sicon_49.gif"  align="absmiddle" alt=" "/></td>
 <div id="tipForStatus" style=" display:none;background:#fff; z-index:100px; width:80px; padding:20px; border:1px solid #ccc;">
        <b>未激活：</b>新注册用户状态，不可使用会员后台。<br /><br />
        <b>启用：</b>正常状态，可以使用会员后台。<br /><br />
        <b>停用：</b>关闭商家帐号，不可使用会员后台。
    </div>
javascript：
//#tipForStatus的左边顶部相对于.statusTip的左边底部偏移（offset是偏移的意思） 水平-30px，上下2px
 $(".statusTip").mouseover(function () {
                    $("#tipForStatus").show().position({
                        of: $(this), my: "left top", at: "left bottom", offset: "-30px 2px"
                          });
                    }).mouseout(function () {
                    $("#tipForStatus").hide();
        });



css版本：
http://blog.csdn.net/zlhzhj/article/details/7611832