jQuery: різниця між положенням () та зміщенням ()

178

У чому різниця між position()і offset()? Я намагався зробити наступне в події кліку:

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

І вони, схоже, повертаються точно так само ... (Клацнувший елемент знаходиться в комірці таблиці в таблиці)

jquery positioning

— Свиш
джерело

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

FYI, .positionотримав оновлений в 1.12.0 => github.com/jquery/jquery/issues/1708

— retrovertigo

Не протилежна інстинктивній точці зору? Це так довільно! Для мене абсолютна «точка» - це позиція. Відносна «точка» - це зміщення.

— Сандберг

28

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

Джерело: http://api.jquery.com/offset/

— jAndy
джерело

3

Як було сказано вище, що вважається батьківським рахунком? Схоже, що позиція виклику () на першому діві всередині іншого div не завжди повертає 0,0 - навіть коли не відбувається інший стиль чи позиціонування.

— Кокодоко

2

jquery.offsetParent (): api.jquery.com/offsetparent "Отримати найближчий елемент предка, який розташований".

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

-6

Обидві функції повертають звичайний об'єкт з двома властивостями: ширина та висота.

offset () позначає положення відносно документа.

position () позначає положення відносно його батьківського елемента

АЛЕ, коли позиція css об'єкта "абсолютна", обидві функції повернуть ширину = 0 та висоту = 0

— dwoutsourcing
джерело

6

Виправлення: зміщення та положення повертає об'єкт із лівими та верхніми властивостями, а не шириною та висотою.

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