jQuery: Sự khác biệt giữa vị trí () và offset ()

178

Sự khác biệt giữa position()và là offset()gì? Tôi đã cố gắng làm như sau trong một sự kiện nhấp chuột:

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

Và chúng dường như trả về chính xác như nhau ... (Phần tử được nhấp nằm trong một ô của bảng trong bảng)

jquery positioning

— Svish
nguồn

215

Cho dù chúng giống nhau tùy thuộc vào bối cảnh.

positiontrả về một {left: x, top: y}đối tượng liên quan đến cha mẹ bù
offsettrả về một {left: x, top: y}đối tượng liên quan đến các tài liệu .

Rõ ràng, nếu tài liệu là cha mẹ bù, thường là trường hợp này, chúng sẽ giống hệt nhau. Phụ huynh bù là "phần tử chứa vị trí gần nhất."

Ví dụ, với tài liệu này:

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

Sau đó $('#sub').offset() sẽ là {left: 200, top: 200}, nhưng nó .position()sẽ được {left: 0, top: 0}.

— David Hedlund
nguồn

2

Vậy cha mẹ bù là cha mẹ đầu tiên với vị trí được đặt thành tuyệt đối? hoặc là?

— Svish

1

@Svish: whoa, tôi đã thực sự bỏ lỡ mã thụt lề? thaks cho chỉnh sửa. có, cha mẹ bù là cha mẹ có vị trí gần nhất . nghĩa là, một phần tử với vị trí được đặt thành tuyệt đối, tương đối hoặc cố định (nhưng không tĩnh). đây không phải là một jQuery hay thậm chí là một thứ javascript, bạn có hành vi tương tự trong css: nếu bạn subđịnh vị trí tuyệt đối thành 0: 0, thì nó sẽ nằm ở góc trên cùng bên trái của cha mẹ bù.

— David Hedlund

1

FYI, .positionđã được cập nhật vào 1.12.0 => github.com/jquery/jquery/issues/1708

— retrovertigo

Không trái ngược với quan điểm bản năng? Điều này thật tùy tiện! Đối với tôi một "điểm" tuyệt đối là một vị trí. Một "điểm" tương đối là một phần bù.

— Sandburg

28

Phương thức .offset () cho phép chúng tôi truy xuất vị trí hiện tại của một phần tử so với tài liệu . Tương phản điều này với .poseition () , lấy ra vị trí hiện tại so với cha mẹ bù . Khi định vị một phần tử mới trên phần tử hiện có để thao tác toàn cầu (cụ thể là để thực hiện kéo và thả), .offset () sẽ hữu ích hơn.

Nguồn: http://api.jquery.com/offset/

— jAndy
nguồn

3

Như đã hỏi ở trên, những gì được coi là cha mẹ bù đắp? Có vẻ như vị trí gọi () trên div đầu tiên bên trong div khác không phải lúc nào cũng trả về 0,0 - ngay cả khi không có kiểu dáng hoặc định vị nào khác đang diễn ra.

— Kokodoko

2

jquery.offsetParent (): api.jquery.com/offsetparent "Lấy phần tử tổ tiên gần nhất được định vị."

— Curtis Yallop

-6

Cả hai hàm trả về một đối tượng đơn giản với hai thuộc tính: chiều rộng và chiều cao.

offset () đề cập đến vị trí liên quan đến tài liệu.

vị trí () đề cập đến vị trí liên quan đến phần tử cha của nó

NHƯNG khi vị trí css của đối tượng là "tuyệt đối", cả hai hàm sẽ trả về width = 0 & height = 0

— nhà ở
nguồn

6

Sửa lỗi: offset và vị trí trả về một đối tượng có thuộc tính bên trái và trên cùng, không phải chiều rộng và chiều cao.

— Jorge Olivares