<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .father { width: 400px; height: 400px; background-color: pink; position: relative; margin: 100px; } .son { width: 200px; height: 200px; background-color: red; position: absolute; top: 100px; left: 100px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> <script src="jquery-1.12.4.js"></script> <script> $(function () { //獲取元素的相對於document的位置 console.log($(".son").offset()); console.log($(".son").offset().left); console.log($(".son").offset().top); //設置元素的left和top $(".son").offset({ left: 300, top: 300 }) //函數方式的去設置 $(".son").offset(function (v, i) { var a = {}; a.left = 400; a.top = 400; return a; }) //獲取元素相對於有定位的父元素的位置 console.log($(".son").position()); console.log($(".son").position().left); console.log($(".son").position().top); }); </script> </body> </html>