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及性能分析方法
Dec 09 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
Feb 17 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
node.js通过url读取文件
Oct 16 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
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
python实现ping的方法
2015/07/06 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
德国高性价比网上药店:medpex
2017/07/09 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
双创工作实施方案
2014/03/26 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
离婚协议书范文
2015/01/26 职场文书
教师创先争优承诺书
2015/04/27 职场文书
婚姻出轨保证书
2015/05/08 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
德劲DE1108畅想
2021/04/22 无线电
python b站视频下载的五种版本
2021/05/27 Python
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs