javascript - 如果我用 jquery 得到 "top"，这是什么意思？

Question

如果我使用 console.log($("#object").position().top)，我得到一个数字，我假设它是“对象”的“顶部”

但是，如果我执行 document.getElementById("object").style.top = $("#object").position().top; 对象移动到不同的地方，(或有时消失)

谁能给我解释一下这是怎么回事？即 $("#object").position().top 返回的是什么“top”？

编辑:糟糕，抱歉，我打算写 document.getElementById("object").style.top。

EDIT2:澄清......

假设我有:

<div id=pie>...</div>

#pie
{
    position:relative;
    top:-50;
}

如果我这样做...... console.log($("#pie").position().top); console.log($("#pie").offset().top);

控制台中打印的数字都不会是 -50。

EDIT3:抱歉，我本来打算写 top:-50;

Answer 1

顶部在:

• javascript - 引用最顶层的 window 元素 [ doc ]
• jQuery:
  • $.offset().top - 返回元素相对于页面顶部的偏移量 [ doc ]
  • $.position().top - 返回元素相对于第一个定位的父元素的偏移量 [ doc ]

示例:

window0
 ├...
 └iframe1
   ├...
   └iframe2
     ├...
     └div1 style=position: relative top: * left: *
       ├...
       └div2 style=position: absolute top: * left: *
         ├...
         └div3 style /*no positioning*/
           ├...
           └div4 
               > div4.top - returns window0
               > div4.parent - returns iframe2
               > $(div4).offset().top - returns the vertical distance from the top part of iframe2
               > $(div4).position().top - returns the vertical distance from the top part of div2