jquery獲取html元素的絕對(duì)位置和相對(duì)位置的方法
更新時(shí)間：2014年06月20日 00:09:08 投稿：mdxy-dxy
這篇文章主要介紹了jquery獲取html元素的絕對(duì)位置和相對(duì)位置的方法,需要的朋友可以參考下
絕對(duì)位置坐標(biāo)：
復(fù)制代碼 代碼如下:
$("#elem").offset().top
$("#elem").offset().left
相對(duì)父元素的位置坐標(biāo)：
復(fù)制代碼 代碼如下:
$("#elem").position().top
$("#elem").position().left
另：
static(默認(rèn)):默認(rèn)定位方式。
relative(相對(duì)定位):在static的基礎(chǔ)上，相對(duì)元素本來(lái)的位置變化，通過(guò)設(shè)定top,bottom,left,right實(shí)現(xiàn)。
absolute(絕對(duì)定位):是相對(duì)父元素來(lái)說(shuō)的，如果父元素中有relative，那么該元素的位置是經(jīng)過(guò)計(jì)算后的結(jié)果。即absolute定位的參照物是“上一個(gè)定位過(guò)的父元素(static不算)”。絕對(duì)定位會(huì)使元素從文檔流中被刪除。
fixed(固定定位):fixed定位的參照物總是當(dāng)前的文檔。利用fixed定位，很容易讓一個(gè)div定位在瀏覽器文檔的左上，右上等方位。
您可能感興趣的文章:
- jquery中獲得元素尺寸和坐標(biāo)的方法整理
- JQuery拖拽元素改變大小尺寸實(shí)現(xiàn)代碼
- JQuery獲取元素文檔大小、偏移和位置和滾動(dòng)條位置的方法集合
- JS和JQUERY獲取頁(yè)面大小,滾動(dòng)條位置,元素位置(示例代碼)
- JavaScript與JQUERY獲取元素的寬、高和位置
- jQuery獲得頁(yè)面元素的絕對(duì)/相對(duì)位置即絕對(duì)X,Y坐標(biāo)
- jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁(yè)示例
- jquery 滾動(dòng)條事件簡(jiǎn)單實(shí)例
- jQuery響應(yīng)滾動(dòng)條事件功能示例
- JQuery獲取元素尺寸、位置及頁(yè)面滾動(dòng)事件應(yīng)用示例
相關(guān)文章
jQuery 動(dòng)態(tài)酷效果實(shí)現(xiàn)總結(jié)
jQuery是一個(gè)優(yōu)秀的JavaScript框架，可以很好的解決不同瀏覽器兼容的問(wèn)題，尤其是在ASP.NET MVC下，它的作用更加的凸顯。2009-12-12
這篇文章主要介紹了jquery插件開發(fā)模式,結(jié)合實(shí)例形式詳細(xì)分析了jQuery插件三種開發(fā)方式實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
為JQuery EasyUI 表單組件增加焦點(diǎn)切換功能的方法
下面小編就為大家?guī)?lái)一篇為JQuery EasyUI 表單組件增加焦點(diǎn)切換功能的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
這篇文章主要介紹了高效jQuery選擇器的5個(gè)技巧,結(jié)合實(shí)例形式總結(jié)分析了jquery選擇器使用過(guò)程中發(fā)的各種常用技巧,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了jQuery焦點(diǎn)圖切換特效，圖片輪播效果特別適合做產(chǎn)品展示，豐富網(wǎng)頁(yè)內(nèi)容，感興趣的小伙伴可以參考下。2015-09-09
jQuery中設(shè)置form表單中action值的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery中設(shè)置form表單中action值的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
前些天寫了一篇文章 jQuery 表單驗(yàn)證擴(kuò)展(一) ，這是jQuery表單驗(yàn)證擴(kuò)展的一個(gè)雛形，里面有了一些基本的功能！昨晚再次努力了一下，對(duì)表單中是否必填項(xiàng)驗(yàn)證這個(gè)部分做了一些修改的擴(kuò)充！2010-10-10
完美解決jQuery fancybox ie 無(wú)法顯示關(guān)閉按鈕的問(wèn)題
下面小編就為大家?guī)?lái)一篇完美解決jQuery fancybox ie 無(wú)法顯示關(guān)閉按鈕的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
這篇文章主要介紹了jQuery toggle 代替方法 的相關(guān)資料,需要的朋友可以參考下2016-03-03
本文主要介紹了微信小程序中獲得用戶輸入內(nèi)容的方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02