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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
Vue异步组件使用详解
Apr 08 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
php获取域名的google收录示例
2014/03/24 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
分享一款基于jQuery的视频播放插件
2014/10/09 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
详解js中==与===的区别
2017/01/08 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
Form表单上传文件(type="file")的使用
2017/08/03 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
项目开发计划书
2014/01/09 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
户外婚礼策划方案
2014/02/08 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
事业单位个人总结
2015/02/12 职场文书
机械生产实习心得体会
2016/01/22 职场文书