Question

我在段落标记内放置了一个跨度，现在位置顶部应该显示为0，偏移量应该显示一些其他值（需要从文档计算），但我在两者中得到相同的值...

我错了？

这是我的代码：

HTML：

<div></div>
<p>paragraph<span>span</span>paragraph</p>

Jquery的：

$('span').click(function(){
console.log($(this).position().top,$(this).offset().top)
})

CSS:

p{
  color:green;
}

span{
  color:red;
}

div{
  height:100px;
  border:2px solid blue;
}

jsfiddle here

Answer 1

将position代码的p属性设置为relative：

p {
  color: green;
  position: relative;
}

http://jsfiddle.net/zPdxB/

Answer 2

jQuery: Difference between position() and offset()

位置引用相对于偏移父级的位置，这实际上是示例中的文档，因为p不是定位元素，而是内联元素。这就是为什么你得到相同的价值。

如果使p元素具有绝对或相对定位，则span的位置现在将相对于您最初预期的P元素，因此与偏移量的值不同。

Answer 3

来自docs

的

.position()方法允许我们检索元素relative to the offset parent的当前位置。

将此与.offset()对比，retrieves the current position relative to the document。

当将新元素定位在另一个元素附近并且在同一个包含DOM元素内时，.position（）更有用。

如果我们谈谈您的情况，那么：

目前.position()和.offset()都有相同的父级，他们将获得文档的偏移位置。

现在，如果您在<p> position:relative;的css类中再添加一个属性，那么您可以找到差异。

简而言之：

.offset().top将从文档中获得顶部。

.position().top将从相对父级获得顶部。（如果父级相对设置）

你可以在这里找到差异：http://jsfiddle.net/BhsrS/1/

结帐小提琴：http://jsfiddle.net/BhsrS/1/

为什么我在jQuery的偏移和位置获得相同的值？

3 个答案: