6

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

我错了？

这是我的代码：

HTML：

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

查询：

$('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在这里

4

3 回答 3

4

将标签的position属性设置为：prelative

p {
  color: green;
  position: relative;
}

http://jsfiddle.net/zPdxB/

于 2013-01-11T07:16:05.970 回答
2

jQuery：位置（）和偏移量（）之间的区别

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

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

于 2013-01-11T07:19:18.907 回答
1

来自docs

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

.offset()将此与, which 进行对比retrieves the current position relative to the document。

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

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

当前两者都.position()具有.offset()相同的父级，它们将获得文档的偏移位置。

现在，如果您在 css 类中再添加一个属性，<p> position:relative;您就可以找到不同之处。

简而言之：

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

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

你可以在这里找到不同之处：http: //jsfiddle.net/BhsrS/1/

检查小提琴：http: //jsfiddle.net/BhsrS/1/

于 2013-01-11T07:23:18.200 回答