jquery获取html元素的绝对位置和相对位置的方法


Posted in Javascript onJune 20, 2014

绝对位置坐标:

$("#elem").offset().top

$("#elem").offset().left

相对父元素的位置坐标:

$("#elem").position().top

$("#elem").position().left

另:
static(默认):默认定位方式。
relative(相对定位):在static的基础上,相对元素本来的位置变化,通过设定top,bottom,left,right实现。
absolute(绝对定位):是相对父元素来说的,如果父元素中有relative,那么该元素的位置是经过计算后的结果。即absolute定位的参照物是“上一个定位过的父元素(static不算)”。绝对定位会使元素从文档流中被删除。
fixed(固定定位):fixed定位的参照物总是当前的文档。利用fixed定位,很容易让一个div定位在浏览器文档的左上,右上等方位。

Javascript 相关文章推荐
网页图片延时加载的js代码
Apr 22 Javascript
jquery attr 设定src中含有&(宏)符号问题的解决方法
Jul 26 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
原生js代码能实现call和bind吗
Jul 31 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
js数组中去除重复值的几种方法
Aug 03 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 #Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 #Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 #Javascript
对之前写的jquery分页做下升级
Jun 19 #Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 #Javascript
jQuery常用操作方法及常用函数总结
Jun 19 #Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 #Javascript
You might like
Chrome Web App开发小结
2014/09/04 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
php自定义分页类完整实例
2015/12/25 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
2014/06/24 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
vue调试工具vue-devtools安装及使用方法
2018/11/07 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
vue选项卡切换登录方式小案例
2019/09/27 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
python 换位密码算法的实例详解
2017/07/19 Python
python正则表达式re之compile函数解析
2017/10/25 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
numpy中矩阵合并的实例
2018/06/15 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
python实现可逆简单的加密算法
2019/03/22 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
python调用支付宝支付接口流程
2019/08/15 Python
python开发前景如何
2020/06/11 Python
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
2013年学期结束动员演讲稿
2014/01/07 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
岗位职责说明书
2014/05/07 职场文书
银行贷款委托书范本
2014/10/11 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技