6

段落タグ内にスパンを配置しました。現在、位置の上部は0として表示され、オフセットは他の値を表示する必要があります(ドキュメントから計算する必要があります)が、両方で同じ値を取得しています...

私は間違っていますか？

これは私のコードです:

HTML:

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

Jクエリ:

$('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（）とoffset（）の違い

pは配置された要素ではなくインラインであるため、Positionは、実際には例のドキュメントであるオフセット親を基準にした位置を指します。そのため、同じ値が返されます。

p要素を絶対位置または相対位置にする場合、スパンの位置は当初の予想どおりにP要素に対して相対的であるため、オフセットとは異なる値になります。

于 2013-01-11T07:19:18.907 に答える
1

からdocs

この.position()メソッドを使用すると、要素の現在の位置を取得できますrelative to the offset parent。

これを と対比し.offset()てretrieves the current position relative to the documentください。

新しい要素を別の要素の近くに配置し、同じ DOM 要素内に配置する場合は、.position() の方が便利です。

あなたのシナリオについて話すと、次のようになります。

現在、.position()と.offset()は同じ親を持ち、ドキュメントのオフセット位置を取得します。

css クラスにもう 1 つ属性を追加する<p> position:relative;と、違いがわかります。

要するに：

.offset().topドキュメントからトップを取得します。

.position().top相対的な親からトップを取得します。(親が相対的に設定されている場合)

ここで違いを見つけることができます：http://jsfiddle.net/BhsrS/1/

フィドルをチェックアウト: http://jsfiddle.net/BhsrS/1/

于 2013-01-11T07:23:18.200 に答える