快捷導(dǎo)航

jquery設(shè)置控件位置的方法

更新時(shí)間：2013年08月21日 14:54:49 作者：

這篇文章介紹了jquery設(shè)置控件位置的方法，有需要的朋友可以參考一下

純JS寫法：

document.getElementById("child").style.left="800px";
document.getElementById("child").style.top="200px";*/

//offset()獲取當(dāng)前元素基于瀏覽的位置
var offsettop=$("#unamespan").offset().top;
var offsetleft=$("#unamespan").offset().left;
//position()獲取當(dāng)前元素基于父容器的位置
var positiontop=$("#unamespan").position().top;
var positionleft=$("#unamespan").position().left;

//設(shè)置panel2的位置基于unamespan的坐標(biāo)
$("#panel2").css({position: "absolute",'top':offsettop+100,'left':offsetleft+50,'z-index':2});

首先需要設(shè)置控件的position屬性
position屬性規(guī)定元素的定位類型，這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框，而不論該元素本身是什么類型。相對(duì)定位元素會(huì)相對(duì)于它在正常流中的默認(rèn)位置偏移。
屬性說明：
1 absolute:生成絕對(duì)定位的元素，相對(duì)于 static定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom"屬性進(jìn)行規(guī)定。

2 fixed 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過 "left","top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

3 relative 生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。因此，"left:20"會(huì)向元素的 LEFT 位置添加 20 像素。

4 static 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left,right 或者 z-index 聲明）。
5 inherit 規(guī)定應(yīng)該從父元素繼承 position屬性的值。(ie中未支持此屬性)

所有空間position的默認(rèn)值為static，所以需要將其設(shè)置為其他屬性可進(jìn)行定位

若有多個(gè)層切需要設(shè)定層的層次關(guān)系那么需要設(shè)置z-index屬性

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。

注釋：元素可擁有負(fù)的 z-index 屬性值。

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

說明
該屬性設(shè)置一個(gè)定位元素沿 z 軸的位置，z軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負(fù)數(shù)則表示離用戶更遠(yuǎn)。

您可能感興趣的文章: