Javascript 了解偏移方法'；s返回值

我在HTML文档中有一个带有

id=“stimulus”

的元素

当我在浏览器中打开此文档并使用浏览器控制台调查

#stimulus

的属性时，我看到的是：

> $('#stimulus').offset()
< Object {top: 0, left: 0}
> $('#stimulus').css('top')
< "-155.761px"
> $('#stimulus').css('left')
< "253.087px"

$（“#刺激”）.offset（）
$（'刺激'）.css（'顶部'）
<“-155.761px”
>$（'刺激'）.css（'左'）
<“253.087px”

我该怎么解释呢？

top

中的

offset

与使用

css

方法访问的

top

有何不同？

从，偏移是从文档顶部开始的；而顶部和左侧css属性是相对于父级的。也许您希望查看）以获取相对于.jQuery的

.offset（）

方法“返回元素相对于文档的坐标”，而

.css（）

方法返回通过css样式应用的任何值

---

偏移量是整个页面中的位置

css top将相对于元素最近的祖先定位元素。 该祖先可能位于页面中的任何位置，因此偏移量和顶部不匹配，除非没有从以下位置定位祖先

：

.offset（）

方法允许我们检索元素相对于文档的当前位置。与此相对应的是

.position（）

，它检索相对于偏移父对象的当前位置

该方法抽象本机元素，它返回相对于父元素的位置，，但前提是它在CSS中明确指定。因此，如果需要，请使用而不是

.offset（）

演示

$（函数（）{
var child=$（'.child'）；
log（'offset:'，child.offset（））；
console.log（'position:'，child.position（））；
console.log（'css:'{
top:child.css（'top'），
左：child.css（'left'）
});
});
html，
身体{
保证金：0；
填充：0；
}
.家长{
位置：绝对位置；
顶部：5px；
左：5px；
}
.孩子{
位置：绝对位置；
顶部：10px；
左：10px；
}

你好，世界
您可能得到了不同的结果，因为
id=“stimulus”
正在设置动画，并且您在不同的帧中发送了
console.log
。或者该元素实际上是“静态”的，并且具有一些其他属性，这些属性会更改其
offset（）
位置

像


console.log（“Offset:，$（'.test'）.Offset（））；//返回{top:0，left:0}
console.log（“上/左：”、$（'.test'）.css（'Top'）、$（'.test'）.css（'Left'））；//返回-200px，-20px
.test{
位置：绝对位置；
顶部：-200px；
左：-20px；
变换：translateY（200px）translateX（20px）；
}

在我的示例中，这是否意味着整个文档的（0，0）位置应该出现
#stimulus
？那不是页面的左上角吗？（那不是
#stimulus
出现的地方。）@dbliss元素是隐藏的，用填充、边框还是边距进行偏移？文件中说，它没有为特殊情况提供正确的位置cases@dbliss为什么不提供复制您的问题的最低限度的示例？这应该是显而易见的，当我访问的价值观，刺激是隐藏的，是的。这就解释了。谢谢我现在在文档中看到了这一点<代码>位置

具有相同的限制

css（'top'）

似乎没有这么大的局限性。应该注意的是，jq 3.x中更明显的错误是：