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

178

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

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

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

jquery positioning

— Svish
источник

215

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

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

Таким образом, родительский смещение является первым родителем с положением, установленным на абсолютное значение? или?

— Свиш

1

@Svish: ааа, я действительно пропустил отступ кода? спасибо за редактирование. да, родительский элемент смещения является ближайшим родительским позиционером . то есть элемент с положением, установленным на абсолютное, относительное или фиксированное (но не статическое). это не jQuery или даже javascript, у вас такое же поведение в css: если вы должны задать subабсолютное позиционирование 0: 0, то оно будет в левом верхнем углу родительского смещения.

— Дэвид Хедлунд

1

К вашему сведению, .positionобновлен в 1.12.0 => github.com/jquery/jquery/issues/1708

— ретровертиго

Разве это не противоречит инстинктивной точке зрения? Это так произвольно! Для меня абсолютная «точка» - это позиция. Относительная «точка» - это смещение.

— Сандбург

28

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

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

— JANDY
источник

3

Как было сказано выше, что считается родителем смещения? Кажется, что вызов position () для первого div внутри другого div не всегда возвращает 0,0 - даже когда не происходит никакого другого стиля или позиционирования.

— Кокодоко

2

jquery.offsetParent (): api.jquery.com/offsetparent "Получить ближайший элемент предка, который расположен."

— Кертис Яллоп

-6

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

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

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

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

— dwoutsourcing
источник

6

Исправление: смещение и положение возвращают объект со свойствами left и top, а не width и height.

— Хорхе Оливарес