offset和position的区别

最新推荐文章于 2021-04-25 20:21:48 发布
原创 最新推荐文章于 2021-04-25 20:21:48 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#浏览器 #JQuery

本文介绍了jQuery中用于获取元素位置的两种方法：position() 和 offset()。这两种方法都会返回元素的左边距和上边距，但它们所依据的位置基准不同。position() 方法返回的是相对于最近的具有相对定位的祖先元素的位置；如果没有这样的祖先元素，则相对于文档视口。而 offset() 方法始终返回相对于文档根节点的位置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用jQuery获取元素位置时，我们会使用position()或offset()方法，两个方法都返回一个包含两个属性的对象－左边距和上边距，它们两个的不同点在于位置的相对点不同。

可以看看下边的图：

position()同offset()的区别

从图中我们可以大体看出两者的区别。position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。

offset()始终返回相对于浏览器文档的距离，它会忽略外层元素。

offset方法和position方法
Binglili0809的博客
07-06 370
* { margin: 0; padding: 0; } .father { width: 400px; height: 400px; background-color: pink; position: relative; margin: 50px; } .son { width: 200px; height: 200px; backgr
Jquery中的offset()和position()深入剖析
01-21
先看看这两个方法的定义。 offset(): 获取匹配元素在当前视口的相对偏移。 返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。 position(): 获取匹配元素相对父元素的偏移。 返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。 真的就这么简单吗？实践出真知。 先来看看在jquery框架源码里面，是怎么获得position()的： 代码如下: // Get *real* offsetParent var offsetParent = this.offsetParent(), /
jQuery中position()与offset()区别
weixin_34255793的博客
12-10 142
使用jQuery获取元素位置时，我们会使用position()或offset()方法，两个方法都返回一个包含两个属性的对象－左边距和上边距，它们两个的不同点在于位置的相对点不同。 可以看看下边的图：   从图中我们可以大体看出两者的区别。position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。o...
position与offset的区别
weixin_33725270的博客
08-09 217
.offset()是相对于文档（document）的当前位置,.position()是相对于父级元素的位移，一个元素可以嵌套多个position 转载于:https://www.cnblogs.com/family-626-77/p/5753205.html...
position和offset
sunhaomei的博客
07-09 323
offset()和position()的区别
whazhl的专栏
07-12 1260
一、Jquery中offset()   获取匹配元素在当前视口的相对偏移。 总是计算相对于文档的位置，无论元素的父元素或祖先元素的position属性是什么。 返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
Jquery中offset()和position()的区别分析
12-09
在jQuery中，`offset()`和`position()`方法都是用来获取元素位置的重要工具，但它们有着本质的区别。理解这些差异对于精确地控制页面元素布局至关重要。 首先，`offset()`方法用于获取匹配元素在当前视口（浏览器...
获取元素位置的position()与offset()方法区别介绍
09-25
总结来说，position()与offset()两个方法虽然看似相似，都是返回一个包含左边距和上边距的对象，但它们在计算位置时所依赖的参照点却截然不同。开发者在选择使用这两种方法时，需要明确其使用场景以及参照点的不同，...
【补充】offset()和position()的区别。
O(∩_∩)O
04-15 568
以后有时间再来详细描写。 offset:获取元素相对于文档（document）的当前坐标 注意 使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移。 postion : 获取元素相对父元素的偏移 注意: 1，使用position()方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相
position()和offset()的区别
weixin_33910759的博客
03-17 137
2019独角兽企业重金招聘Python工程师标准>>> ...
27.html的定位（position）和偏移量（offset）
越努力越幸运的博客
04-25 6068
文章目录定位偏移量（offset）相对定位绝对定位固定定位粘滞定位 定位 定位（position）是一种高级的布局手段，通过定位可以将元素摆放到页面的任意位置 可选值： static：默认值，元素静止，没有开启定位 relative：开启元素的相对定位 absolute：开启元素的绝对定位 fixed：开启元素的固定定位 sticky：开启元素的粘滞定位 偏移量（offset） 元素开启定位后，可以通过偏移量来设置元素的位置，偏移量有四个分别是 top：定位元素和定位位置上边的距离 bottom：定位元素和
JQ之 offset 和 position 的用法与区别
zhcscs的博客
06-13 1154
offset：获取元素相对于文档（document）的当前坐标 注意：使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移。 postion：获取元素相对父元素的偏移 注意:     1，使用position()方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移
jquery中position 和offset的区别
weixin_30312563的博客
06-30 174
position 和offset的区别 position()和offset()都是获取当前的元素的位置的，但是二者还是有一些区别的，总结一下，以免以后混淆时可以重温一遍： position()： 返回的是一个对象：{left: 100 ，top:100}； 对象中的left和top是相对于元素有定位的父级的距离。 offset()： 返回的是一个对象：{l...
offset()和position()
weixin_30955341的博客
04-01 138
网上百度都有的说明是 offset():获取匹配元素在当前视口的相对偏移。 position():获取匹配元素相对父元素的偏移。 如果单纯写这两句话，这个博客毫无意义 这里我写下他俩的使用情况，希望对各位看官有所帮助 （下面两行是鄙人的搪塞解释，不喜欢长篇大论的可以跳过直接看后面例子） offset(),根据定义，相对视口的距离，视口也就是整个文档，那么元素也就是脱离文档流的，那拿拖...
Jquery .position和offset区别
分享我的点点滴滴，在成长路上与你同行！
01-02 653
说明：    position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离， 如果找不到这样的元素，则返回相对于浏览器的距离。   offset()始终返回相对于浏览器文档的距离，它会忽略外层元素   1》jQuery中offset()方法:获取或设置指定元素在视窗或文章的偏移位置;        语法：$(selector).offset...
jquery的position和offset方法
u010999809的博客
08-17 508
这里举个例子，jquery怎么计算的可以跟下源码（后续有空可能会专门介绍下）。我从页面以及css入手，自己计算结果，只是借用下jquery的position和offset方法来验证下结果；一方面深入理解css的盒子模型（例子中采用传统的content-box），另一方面，熟悉jquery方法的作用 <!doctype html> <html lang="en"> &lt...
jquery中position（）和offset（）方法使用区别
喜东东的博客
08-10 284
1.position（）：获取该元素距离有最近定位的父元素的位置 2：offset()：获取该元素距离文档的位置 使用方法如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> ...
world position offset
最新发布
04-01
### 世界坐标偏移的概念 在图形编程和游戏开发中，`World Position Offset` 是一种用于修改物体顶点位置的技术。它允许开发者通过计算改变模型的世界空间中的位置[^1]。这种技术通常被用来创建动态效果，比如地形变形、波浪起伏或者角色动画。 具体来说，在渲染管线中，`World Position Offset` 可以作为着色器的一部分来实现。这通常是通过顶点着色器（Vertex Shader）完成的，其中原始顶点的位置会被调整为新的世界空间位置。这种方法可以极大地增强视觉效果的真实感和复杂度。 以下是其实现的一个基本流程： 1. **输入数据准备**：将几何体的数据传递到 GPU 中，这些数据可能包括顶点位置、法线以及其他属性。 2. **应用变换矩阵**：使用对象的局部变换矩阵将其从模型空间转换至世界空间。 3. **执行偏移操作**：基于特定逻辑（如噪声函数或其他算法），对顶点的世界坐标进行偏移处理。 4. **后续变换**：继续执行视图投影变换并最终呈现图像。 下面是一个简单的 HLSL 实现示例，展示如何利用 `WorldPositionOffset` 修改顶点位置： ```hlsl float4x4 WorldMatrix : register(c0); float4x4 ViewProjectionMatrix : register(c1); // 噪声纹理采样器 Texture2D NoiseTexture; SamplerState LinearSampler; struct VS_INPUT { float4 Pos : POSITION; // 输入顶点位置 (模型空间) }; struct PS_INPUT { float4 Pos : SV_POSITION; // 输出裁剪空间位置 }; PS_INPUT main(VS_INPUT input) { PS_INPUT output = (PS_INPUT)0; // 将顶点从模型空间转到世界空间 float4 worldPos = mul(input.Pos, WorldMatrix); // 使用噪声纹理生成高度偏移量 float noiseValue = NoiseTexture.Sample(LinearSampler, worldPos.xz / 10).r * 5.f; worldPos.y += noiseValue; // 转换到裁剪空间 output.Pos = mul(worldPos, ViewProjectionMatrix); return output; } ``` 上述代码片段展示了如何通过采样一张二维噪声贴图来决定每个顶点的高度变化，并以此为基础增加额外的艺术化控制能力[^2]。 #### 注意事项 - 需要特别注意性能优化问题，因为复杂的运算可能会显著降低帧率。 - 如果涉及到大规模场景，则应考虑分层细节级别（LOD）、剔除等策略减少不必要的计算负担。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值