position()函數(shù)用于返回當(dāng)前匹配元素相對于其被定位的祖輩元素的偏移，也就是相對于被定位的祖輩元素的坐標(biāo)。該函數(shù)只對可見元素有效。

所謂"被定位的元素"，就是元素的CSS position屬性值為absolute、relative或fixed(只要不是默認(rèn)的static即可)。

該函數(shù)返回一個坐標(biāo)對象，該對象有一個left屬性和top屬性。屬性值均為數(shù)字，它們都以像素(px)為單位。

與offset()不同的是：position()返回的是相對于被定位的祖輩元素的坐標(biāo)，offset()返回的是相對于當(dāng)前文檔的坐標(biāo)。此外，position()函數(shù)無法用于設(shè)置操作。如果當(dāng)前元素的祖輩元素全部都是默認(rèn)定位(static)，那么該函數(shù)返回的偏移位置與offset()函數(shù)相同。

該函數(shù)屬于jQuery對象(實(shí)例)。

語法

jQuery 1.2 新增該函數(shù)。

jQueryObject.position( )

返回值

position()函數(shù)的返回值為Object類型，返回一個相對于離它最近的"被定位的"祖輩元素的偏移坐標(biāo)對象，該對象具有l(wèi)eft和top屬性。

如果當(dāng)前jQuery對象匹配多個元素，返回坐標(biāo)時，position()函數(shù)只以其中第一個匹配的元素為準(zhǔn)。如果沒有匹配的元素，則返回undefined。

position()中的坐標(biāo)參考系是以被定位的祖輩元素的左上角為原點(diǎn)(0,0)，向右為正，向下為正。

示例&說明

以下面這段HTML代碼為例：

<br>
<br>
<p id="n1"><span id="n2">專注于編程開發(fā)技術(shù)分享</span></p>

以下jQuery示例代碼用于演示position()函數(shù)和offset()函數(shù)的用法：

var $n2 = $("#n2");
// 輸出n2的偏移坐標(biāo)
var pos = $n2.position();
document.writeln( "n2的position()偏移坐標(biāo)：(" + pos.left + ", " + pos.top + ")" ); // n2的position()偏移坐標(biāo)：(8, 60)
var coord = $n2.offset();
document.writeln( "n2的offset()的偏移坐標(biāo)：(" + coord.left + ", " + coord.top + ")" ); // n2的offset()的偏移坐標(biāo)：(8, 60)

從上述jQuery的運(yùn)行結(jié)果可知，position()并不是獲取相對于其父元素的偏移位置。如果n2的祖輩元素全部為默認(rèn)定位，則position()返回的偏移位置和offset()函數(shù)一致。

下面，我們將上述HTML代碼中的n1加上相對定位(relative)：

<br>
<br>
<p id="n1" style="position: relative;" ><span id="n2">專注于編程開發(fā)技術(shù)分享</span></p>

然后，我們重新執(zhí)行上述jQuery代碼，可以看到以下結(jié)果：

var $n2 = $("#n2");
// 輸出n2的偏移坐標(biāo)
var pos = $n2.position();
document.writeln( "n2的position()偏移坐標(biāo)：(" + pos.left + ", " + pos.top + ")" ); // n2的position()偏移坐標(biāo)：(0, 0)
var coord = $n2.offset();
document.writeln( "n2的offset()的偏移坐標(biāo)：(" + coord.left + ", " + coord.top + ")" ); // n2的offset()的偏移坐標(biāo)：(8, 60)

此時，在n2的祖輩元素中，n1是離n2最近的定位的祖輩元素(這里是relative，absolute、fixed也是如此)，因此position()返回n2相對于n1的偏移位置。

.jQuery中position函數(shù)的應(yīng)用(居中，超出屏幕處理等)

jQuery提供了一個Position函數(shù)，可以很方便的對Html元素進(jìn)行定位，簡單的使用方法如下:

$(".daygrid").click(function(event){
  clickedGrid = $(this);
  $(".modal").modal("show");
  $(".modal").position({
    of:clickedGrid,
    offset:" ",
    collision:"fit"
  });
});

上面是一個很常用的用法，注冊一個click時間，然后當(dāng)有點(diǎn)擊事件發(fā)生時，獲取到被點(diǎn)擊的元素，然后將對話框用position方法顯示至界面中。

position函數(shù)接受一個options對象，參數(shù)有很多

of：表示要放置在那個對象上，也可以傳遞click的event對象

my與at：這兩個比較不容易理解，其實(shí)也就是參照物和被參照物，my參數(shù)表示用什么位置來做參照而at表示參照目標(biāo)的那個位置。值范圍為”left center right top bottom”的任意一個或兩個。舉個例子：my:”top left”,at:”left buttom”，這樣配置表示將要被定為的元素的左上角放置在目標(biāo)元素的左下角。

collision：表示如何處理碰撞，值范圍為:”flip fit none”三選一。flip的官方英文說明看不是很懂，實(shí)際測試的效果是，如果超出了預(yù)期范圍（如window）則會嘗試將元素放置到目標(biāo)區(qū)域的相反位置。fit是適應(yīng)，也就是會將元素完整的放置在預(yù)期范圍內(nèi)，而不會讓元素溢出。而none則是不做任何碰撞處理。

offset表示依靠my、at、of對齊元素后再進(jìn)行多少距離的偏移，例如設(shè)置為”100 100″表示移至目標(biāo)位置后再向下和右偏移100px

常見的使用就是彈出對話框的位置，為了讓對話框在鼠標(biāo)點(diǎn)擊的位置顯示，則可以將click傳的event對象傳遞給of參數(shù)，并且為了保證對話框在窗口范圍內(nèi)，可以將collision設(shè)置為fit。最后再根據(jù)實(shí)際需求來設(shè)置對齊參數(shù)my和at，并且用offset進(jìn)行偏移微調(diào)。一個將彈出對話框設(shè)置在窗口中央的例子：

$("#myDialog").position({
  my: "center",
  at: "center",
  of: window,
  collision:"fit"
});

以上內(nèi)容是小編給大家分享的jQuery position() 函數(shù)詳解以及jQuery中position函數(shù)的應(yīng)用的全部敘述，希望大家喜歡。

最新評論