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 相关文章推荐
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
jQuery中Dom的基本操作小结
2014/01/23 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
Python pickle模块用法实例
2015/04/14 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
运动会通讯稿300字
2014/02/02 职场文书
2014年两会学习心得体会
2014/03/10 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
超市店庆活动方案
2014/08/31 职场文书
介绍信模板
2015/01/31 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
Python字典和列表性能之间的比较
2021/06/07 Python
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA