jQuery CSS 操作 - position() 方法

定義和用法

position() 方法返回匹配元素相對于父元素的位置(偏移)玛痊。
該方法返回的對象包含兩個整型屬性:top 和 left汰瘫,以像素計。
此方法只對可見元素有效擂煞。

語法

$(selector).position()

實例

獲得 <p> 元素的當前位置:

$(".btn1").click(function(){
  x=$("p").position();
  $("#span1").text(x.left);
  $("#span2").text(x.top);
});

完整小例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;padding: 0;
    }
    #big{
    width:100px;
    height:100px;
    position: absolute;
    left: 200px;
    top: 200px;
    }
  #box{
    width:100px;
    height:100px;
    position: absolute;
    left: 300px;
    top: 300px;
    /* right: 300px;
    bottom: 300px; */
    background: red;
    margin: 20px;
    border: 10px solid black;
    padding: 50px;
    /* display: none; */
    display: block;
  }
  </style>
</head>
<body>
  <div id="big">
    <div id="box"></div>
  </div>
  <script src="jquery-3.2.1.js"></script>
  <script>
    console.log($("#box").position());
    console.log($("#box").position().left);
    console.log($("#box").position().top);
    console.log($("#box").position().right);
    console.log($("#box").position().bottom);
  </script>
</body>
</html>

方法總結

1.$("#box").position()的輸出值是一個對象混弥,{"left":xxx,"top":xxx}(就像這個);$("#box").position().left的輸出值這個元素的left值(包括對該元素的定位設置為right時);$("#box").position().top的輸出值這個元素的top值(包括對該元素的定位設置為bootom時)对省;而$("#box").position().right和$("#box").position().bottom的輸出值為undefined蝗拿。

2.它的left和top都是相對于它的父元素而言晾捏,而不是相對于整個頁面。

3.當給這個元素設定display:none屬性時哀托,$("#box").position()會輸出{"left":-200,"top":-200};$("#box").position().left會輸出-200(包括對該元素的定位設置為right時)惦辛;$("#box").position().top會輸出-200(包括對該元素的定位設置為bootom時);而$("#box").position().right和$("#box").position().bottom的輸出值依然為undefined仓手。

4.當給這個元素的父元素設定display:none屬性時胖齐,當給這個元素設定display:none屬性時,$("#box").position()會輸出{"left":0,"top":0};$("#box").position().left會輸出0(包括對該元素的定位設置為right時)嗽冒;$("#box").position().top會輸出0(包括對該元素的定位設置為bootom時)市怎;而$("#box").position().right和$("#box").position().bottom的輸出值依然為undefined。

5.當不給這個元素設定position:absolute(或者position:fixed),以及不給這個元素設定position值(或者設定position:relative)時辛慰,$("#box").position()會輸出{"left":0,"top":0};$("#box").position().left會輸出0(包括對該元素的定位設置為right時)区匠;$("#box").position().top會輸出0(包括對該元素的定位設置為bootom時);而$("#box").position().right和$("#box").position().bottom的輸出值依然為undefined帅腌。

綜上:JQuery中的position()方法可以獲取匹配元素相對父元素的偏移驰弄,返回的對象包含兩個整型屬性:top 和 left。(若想獲取匹配元素在當前視口的相對偏移可以使用JQuery中的offset()方法)

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末速客,一起剝皮案震驚了整個濱河市戚篙,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌溺职,老刑警劉巖岔擂,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異浪耘,居然都是意外死亡乱灵,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進店門七冲,熙熙樓的掌柜王于貴愁眉苦臉地迎上來痛倚,“玉大人,你說我怎么就攤上這事澜躺〔跷龋” “怎么了?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵掘鄙,是天一觀的道長耘戚。 經(jīng)常有香客問我,道長操漠,這世上最難降的妖魔是什么收津? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上朋截,老公的妹妹穿的比我還像新娘蛹稍。我一直安慰自己,他們只是感情好部服,可當我...
    茶點故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布唆姐。 她就那樣靜靜地躺著,像睡著了一般廓八。 火紅的嫁衣襯著肌膚如雪奉芦。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天剧蹂,我揣著相機與錄音声功,去河邊找鬼。 笑死宠叼,一個胖子當著我的面吹牛先巴,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播冒冬,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼伸蚯,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了简烤?” 一聲冷哼從身側響起剂邮,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎横侦,沒想到半個月后挥萌,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡枉侧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年引瀑,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片棵逊。...
    茶點故事閱讀 39,703評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡伤疙,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出辆影,到底是詐尸還是另有隱情,我是刑警寧澤黍特,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布蛙讥,位于F島的核電站,受9級特大地震影響灭衷,放射性物質發(fā)生泄漏次慢。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望迫像。 院中可真熱鬧劈愚,春花似錦、人聲如沸闻妓。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽由缆。三九已至注祖,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間均唉,已是汗流浹背是晨。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工顽分, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留闻蛀,地道東北人微驶。 一個月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓句葵,卻偏偏與公主長得像检盼,于是被迫代替她去往敵國和親劣挫。 傳聞我的和親對象是個殘疾皇子讲逛,可洞房花燭夜當晚...
    茶點故事閱讀 44,601評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案掂之? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,748評論 1 92
  • 各種純css圖標 CSS3可以實現(xiàn)很多漂亮的圖形怒医,我收集了32種圖形炉抒,在下面列出。直接用CSS3畫出這些圖形稚叹,要比...
    劍殘閱讀 9,537評論 0 8
  • 要了解JQuery中的position()方法焰薄,本著代碼見名知意的原則,我們就得先知道position原本的意思扒袖。...
    非的干不過歐的閱讀 807評論 0 0
  • CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用CSS Sprite值的是把多個icon圖片放在一張圖里...
    老虎愛吃母雞閱讀 199評論 0 0
  • 不想再自我設限了塞茅,我覺得人生最美好的事情就在于體驗了。
    六月花閱讀 207評論 0 0