Try It Editor
Tip: Press
Ctrl/⌘ + Enter
to Run
▶ Run
Reset
Copy
Download
Code
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>offset() / position()</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <style>#wrap{position:relative;left:40px;top:30px;border:1px solid #ccc;padding:20px} #box{position:absolute;left:50px;top:25px;width:60px;height:40px;background:#d1c4e9}</style> </head> <body> <div id="wrap"> <div id="box"></div> </div> <button id="read">Read</button> <button id="move">Move via offset()</button> <pre id="out"></pre> <script> $("#read").on("click", function(){ var off = $("#box").offset(); var pos = $("#box").position(); $("#out").text("offset: " + JSON.stringify(off) + "\nposition: " + JSON.stringify(pos)); }); $("#move").on("click", function(){ var off = $("#box").offset(); $("#box").offset({ top: off.top + 10, left: off.left + 20 }); }); </script> </body> </html>
Output