JQuery: Разница между позицией() и смещением()

В чем разница между position() и offset()? Я попытался сделать следующее в событии click:

console.info($(this).position(), $(this).offset());

И они, похоже, возвращаются точно так же... (Элемент clicked находится внутри ячейки таблицы в таблице)

Ответ 1

Являются ли они одинаковыми, зависит от контекста.

position возвращает объект {left: x, top: y} относительно родительского смещения
offset возвращает объект {left: x, top: y} относительно документа.

Очевидно, что если документ является родительским смещением, что часто имеет место, они будут идентичны. Смещенный родительский элемент - это "ближайший позиционированный содержащий элемент".

Например, с этим документом:

 <div style="position: absolute; top: 200; left: 200;">
     <div id="sub"></div>
 </div>

Тогда $('#sub').offset() будет {left: 200, top: 200}, но его .position() будет {left: 0, top: 0}.

Ответ 2

Метод .offset() позволяет нам получить текущую позицию элемента относительно документа. Контрастируйте это с помощью .position(), которая извлекает текущую позицию относительно родителя смещения. При позиционировании нового элемента поверх существующего для глобальных манипуляций (в частности, для реализации drag-and-drop) более полезно использовать .offset().

Источник: http://api.jquery.com/offset/

Ответ 3

Обе функции возвращают простой объект с двумя свойствами: шириной и высотой.

offset() относится к позиции относительно документа.

position() относится к позиции относительно ее родительского элемента

НО, когда позиция объекта css является "абсолютной", обе функции возвращают width = 0 и height = 0