offset()和position()
网上百度都有的说明是
offset():获取匹配元素在当前视口的相对偏移。
position():获取匹配元素相对父元素的偏移。
如果单纯写这两句话,这个博客毫无意义
这里我写下他俩的使用情况,希望对各位看官有所帮助
(下面两行是鄙人的搪塞解释,不喜欢长篇大论的可以跳过直接看后面例子)
offset(),根据定义,相对视口的距离,视口也就是整个文档,那么元素也就是脱离文档流的,那拿拖拽来说,如果拖拽的对象定位是fixed,则用ta
position(),获取相对父元素的偏移,也就是说元素在文档内,那拿拖拽来说,如果拖拽的对象定位不是fixed(包括static,relative,absolute),则用ta
具体例子(目前正在写的一个项目 详情请猛戳https://github.com/mfx55/drawingBoard)
这个颜色选择器拖拽时候就用offset()来获取拖拽后的位置
部分代码截图


这个透明度选择器,是相对于透明度那个框定位的,所以这里用position()
部分代码截图


总结:
offset():获取定位为fixed的元素的位置
position():获取定位为static,absolute,relative的元素的位置
offset()和position()的更多相关文章
- jquery offset() 与position()方法的区别
jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...
- 区分jquery中的offset和position
一次又一次地碰到需要获取元素位置的问题, 然后一次又一次地查offset和position的区别. 忍不了了, 这次一定得想办法记下来. position是元素相对于父元素的位置. 这个好记, par ...
- .offset()与.position()区别
jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下: offset():获取匹配元素在当前视口的相对偏移.返回的对象包含两个整形属性:top 和 left ...
- jQuery获得元素位置offset()和position()的区别
jQuery获得元素位置offset()和position()的区别 jQuery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同 offset(): 获取 ...
- 关于jQuery中的 offset() 和 position() 的用法
---恢复内容开始--- 在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引入这个方法呢?这两个方法之间有 ...
- 关于jQuery中的offset()和position()
在jQuery中有两个获取元素位置的方法offset()和position().position()方法是在1.2.6版本之后加入的,为什么要引 入这个方法呢?这两个方法之间有什么异同?使用的时候应该 ...
- Jquery中的offset()和position()深入剖析(元素定位)
先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父 ...
- Jquery中的offset()和position()深入剖析
jquery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢 ...
- offset()与position()的区别
jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下: offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left ...
- jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position
定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...
随机推荐
- Easy UI DataGrid 与 分页
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...
- Yii2学习笔记:汉化yii,设置表单的描述(属性标签attributeLabels)
一:汉化框架 框架汉化在这里设置,如果不生效,前台后台的配置文件都设置下应该就可以了 二:汉化表单 汉化表单,直接在模型层设置,例如: 原来的联系我们表单 汉化后: ] 这种汉化在哪里修改呢?其实是设 ...
- Linux系统在启动过程中mbr主引导程序被破坏的解决方案
首先,mbr主引导程序被破坏是指系统在启动过程中,磁头找不到/boot分区(windows的启动分区在c盘). 1)下面我们模拟主引导分区被破坏的情况:(在启动分区划分446M的存储大小) 2)重启( ...
- React-Native基础_5.列表视图ListView
列表视图ListView 用来显示垂直滚动列表,需要指定两个东西,1 数据的来源 dataSource,2 渲染列表的条目布局 rendRow 'use strict' import React, { ...
- 移动端 css 禁止长按屏幕选中
*{ -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:n ...
- JAVA怎么在函数内改变传入的值
public class TestInt { public int aa(int i) { return i+4; } public static void main(String [] args) ...
- 人生苦短之我用Python篇(队列、生产者和消费者模型)
队列: queue.Queue(maxsize=0) #先入先出 queue.LifoQueue(maxsize=0) #last in fisrt out queue.PriorityQueue( ...
- My Reading List - Machine Learning && Computer Vision
本博客汇总了个人在学习过程中所看过的一些论文.代码.资料以及常用的资源与网站,为了便于记录自身的学习过程,将其整理于博客之中. Machine Learning (1) Machine Learnin ...
- Android HOOK工具Cydia Substrate使用详解
目录(?)[+] Substrate几个重要API介绍 MShookClassLoad MShookMethod 使用方法 短信监控实例 Cydia Substrate是一个代码修改平台.它可以修 ...
- Codeforces 828C String Reconstruction【并查集巧妙运用】
LINK 题目大意 给你n个串和在原串中的出现位置,问原串 思路 直接跑肯定是GG 考虑怎么优化 因为保证有解,所以考虑过的点我们就不再考虑 用并查集维护当前每个点之后最早的没有被更新过的点 然后就做 ...