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 相关文章推荐
checkbox使用示例
Aug 23 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
浅谈Vue.js
Mar 02 Javascript
vue.js的提示组件
Mar 02 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 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
虫族 ZERG 概述
2020/03/14 星际争霸
Function eregi is deprecated (解决方法)
2013/06/21 PHP
javascript 去字符串空格终极版(支持utf8)
2009/11/14 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
50款非常棒的 jQuery 插件分享
2012/03/29 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
Python 用户登录验证的小例子
2013/03/06 Python
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Django实现分页显示效果
2019/10/31 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
装饰工程师岗位职责
2014/06/08 职场文书
七一建党节慰问信
2015/02/14 职场文书
公司表扬稿范文
2015/05/05 职场文书
2015年教师节感言
2015/08/03 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
浅谈python中的多态
2021/06/15 Python