DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery設置控件位置的方法
jquery設置控件位置的方法
編輯:JQuery特效代碼     

純JS寫法:
. 代碼如下:
document.getElementById("child").style.left="800px";
document.getElementById("child").style.top="200px";*/

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

//設置panel2的位置基於unamespan的坐標 
 $("#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軸定義為垂直延伸到顯示區的軸。如果為正數,則離用戶更近,為負數則表示離用戶更遠。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved