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 相关文章推荐
jquery遍历input取得input的name
Apr 27 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
JavaScript 计算笛卡尔积实例详解
Dec 02 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
手把手教你如何编译打包video.js
Dec 09 Javascript
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
DC动漫人物排行
2020/03/03 欧美动漫
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
Javascript !!的作用
2008/12/04 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
python Web开发你要理解的WSGI & uwsgi详解
2018/08/01 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
keras导入weights方式
2020/06/12 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
医药大学生求职简历的自我评价
2013/10/17 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫