jQuery: Difference between position() and offset()

by

Whether they’re the same depends on context.

  • position returns a {left: x, top: y} object relative to the offset parent

  • offset returns a {left: x, top: y} object relative to the document.

Obviously, if the document is the offset parent, which is often the case, these will be identical. The offset parent is “the closest positioned containing element.”

For example, with this document:

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

Then the $('#sub').offset() will be {left: 200, top: 200}, but its .position() will be {left: 0, top: 0}.

More Related Contents:

  1. Stopping fixed position scrolling at a certain point?
  2. What is the simplest jQuery way to have a ‘position:fixed’ (always at top) div?
  3. How to change the element of another div by clicking and hovering on an element of a different div
  4. Hide/Show div on specific page with jquery
  5. use jQuery’s find() on JSON object
  6. Create a CSS rule / class with jQuery at runtime
  7. Custom events in jQuery?
  8. Best Way to Extend a jQuery Plugin
  9. How to get multiple select box values using jQuery?
  10. Handling colon in element ID with jQuery
  11. .prop(‘checked’,false) or .removeAttr(‘checked’)?
  12. datatable jquery – table header width not aligned with body width
  13. validating multiple textbox having same name with jquery validator validates only first input
  14. Mvc Jquery Ajax Post returns null
  15. How to add additional fields to form before submit?
  16. How to get only direct text without tags with jQuery in HTML
  17. Efficient, concise way to find next matching sibling?
  18. jQuery stopPropagation bubble down
  19. jqGrid Reposition Delete Confirmation Box
  20. jquery array group by
  21. disable textbox using jquery?
  22. How to cancel navigation when user clicks a link ( element)?
  23. jquery – difference between $.functionName and $.fn.FunctionName
  24. Does it make sense to jQuery cache $(this)?
  25. How do I make a JSONP call with JQuery with Basic Authentication?
  26. JQuery, Flot, valuelabels, center
  27. How to Remove duplicate dropdown option elements with same value
  28. JQuery Ajax is sending GET instead of POST
  29. jQuery 1.4.2 VSDoc
  30. How does jQuery .live() work?

Leave a Comment