Retrieve the position X Y of an HTML element relative to the browser window

Question

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window

User · Answer

if using jQuery  the dimensions plugin is excellent and allows you specify exactly what you want   e g   Relative position  absolute position  absolute position without padding  with padding     It goes on  let s just say there is a lot you can do with it   Plus the bonus of using jQuery is it s lightweight file size and easy use  you won t go back to JavaScript without it afterwards

User · Answer

Since different browsers are rendering border  padding  margin and etc in different way  I wrote a little function to retrieve top and left positions of specific element in every root element that you want in precise dimension    function getTop root  offset        var rootRect   root getBoundingClientRect        var offsetRect   offset getBoundingClientRect        return offsetRect top - rootRect top      For retrieve left position you must return        return offsetRect left - rootRect left

User · Answer

This function returns an element s position relative to the whole document  page   function getOffset el      const rect   el getBoundingClientRect      return       left  rect left   window scrollX      top  rect top   window scrollY         Using this we can get the X position  getOffset element  left      or the Y position  getOffset element  top

User · Answer

This function returns an element s position relative to the whole document  page   function getOffset el      const rect   el getBoundingClientRect      return       left  rect left   window scrollX      top  rect top   window scrollY         Using this we can get the X position  getOffset element  left      or the Y position  getOffset element  top

User · Answer

This is easy as two lines in JS   var elem   document getElementById  quot id quot        alert elem getBoundingClientRect

User · Answer

If you are using jQuery  this could be a simple solution    lt script gt    var el       element      var position   el position      console log   left      position left      top      position top     lt  script gt

User · Answer

Since different browsers are rendering border  padding  margin and etc in different way  I wrote a little function to retrieve top and left positions of specific element in every root element that you want in precise dimension    function getTop root  offset        var rootRect   root getBoundingClientRect        var offsetRect   offset getBoundingClientRect        return offsetRect top - rootRect top      For retrieve left position you must return        return offsetRect left - rootRect left

User · Answer

I ve taken  meouw s answer  added in the clientLeft that allows for the border  and then created three versions   getAbsoluteOffsetFromBody - similar to  meouw s  this gets the absolute position relative to the body or html element of the document  depending on quirks mode   getAbsoluteOffsetFromGivenElement - returns the absolute position relative to the given element  relativeEl   Note that the given element must contain the element el  or this will behave the same as getAbsoluteOffsetFromBody  This is useful if you have two elements contained within another  known  element  optionally several nodes up the node tree  and want to make them the same position   getAbsoluteOffsetFromRelative - returns the absolute position relative to the first parent element with position  relative  This is similar to getAbsoluteOffsetFromGivenElement  for the same reason but will only go as far as the first matching element   getAbsoluteOffsetFromBody   function  el          finds the offset of el from the body or html element     var  x   0      var  y   0      while  el  amp  amp   isNaN  el offsetLeft    amp  amp   isNaN  el offsetTop                    x    el offsetLeft - el scrollLeft   el clientLeft           y    el offsetTop - el scrollTop   el clientTop          el   el offsetParent            return   top   y  left   x       getAbsoluteOffsetFromGivenElement   function  el  relativeEl          finds the offset of el from relativeEl     var  x   0      var  y   0      while  el  amp  amp  el    relativeEl  amp  amp   isNaN  el offsetLeft    amp  amp   isNaN  el offsetTop                    x    el offsetLeft - el scrollLeft   el clientLeft           y    el offsetTop - el scrollTop   el clientTop          el   el offsetParent            return   top   y  left   x       getAbsoluteOffsetFromRelative   function  el          finds the offset of el from the first parent with position  relative     var  x   0      var  y   0      while  el  amp  amp   isNaN  el offsetLeft    amp  amp   isNaN  el offsetTop                    x    el offsetLeft - el scrollLeft   el clientLeft           y    el offsetTop - el scrollTop   el clientTop          el   el offsetParent          if  el    null                        if  getComputedStyle      undefined                   valString   getComputedStyle el  null  getPropertyValue  position                else                 valString   el currentStyle  position                if  valString      relative                   el   null                      return   top   y  left   x        If you are still having problems  particularly relating to scrolling  you could try looking at http   www greywyvern com  post 331 - I noticed at least one piece of questionable code in getStyle which should be fine assuming browsers behave  but haven t tested the rest at all

User · Answer

After much research and testing this seems to work  function getPosition e        var isNotFirefox    navigator userAgent toLowerCase   indexOf  firefox      -1       var x   0  y   0      while  e            x    e offsetLeft - e scrollLeft    isNotFirefox   e clientLeft   0           y    e offsetTop - e scrollTop    isNotFirefox   e clientTop   0           e   e offsetParent            return   x  x   window scrollX  y  y   window scrollY        see http   jsbin com xuvovalifo edit html js output

User · Answer

You can add two properties to Element prototype to get the top left of any element   Object defineProperty  Element prototype   documentOffsetTop         get  function               return this offsetTop     this offsetParent   this offsetParent documentOffsetTop   0                Object defineProperty  Element prototype   documentOffsetLeft         get  function               return this offsetLeft     this offsetParent   this offsetParent documentOffsetLeft   0                 This is called like this   var x   document getElementById   myDiv    documentOffsetLeft    Here s a demo comparing the results to jQuery s offset   top and  left  http   jsfiddle net ThinkingStiff 3G7EZ

User · Answer

jQuery  offset   will get the current coordinates of the first element  or set the coordinates of every element  in the set of matched elements  relative to the document

User · Answer

The correct approach is to use element getBoundingClientRect     var rect   element getBoundingClientRect    console log rect top  rect right  rect bottom  rect left     Internet Explorer has supported this since as long as you are likely to care about and it was finally standardized in CSSOM Views  All other browsers adopted it a long time ago   Some browsers also return height and width properties  though this is non-standard   If you re worried about older browser compatibility  check this answer s revisions for an optimised degrading implementation   The values returned by element getBoundingClientRect   are relative to the viewport   If you need it relative to another element  simply subtract one rectangle from the other   var bodyRect   document body getBoundingClientRect        elemRect   element getBoundingClientRect        offset     elemRect top - bodyRect top   alert  Element is     offset     vertical pixels from  lt body gt

User · Answer

I ve taken  meouw s answer  added in the clientLeft that allows for the border  and then created three versions   getAbsoluteOffsetFromBody - similar to  meouw s  this gets the absolute position relative to the body or html element of the document  depending on quirks mode   getAbsoluteOffsetFromGivenElement - returns the absolute position relative to the given element  relativeEl   Note that the given element must contain the element el  or this will behave the same as getAbsoluteOffsetFromBody  This is useful if you have two elements contained within another  known  element  optionally several nodes up the node tree  and want to make them the same position   getAbsoluteOffsetFromRelative - returns the absolute position relative to the first parent element with position  relative  This is similar to getAbsoluteOffsetFromGivenElement  for the same reason but will only go as far as the first matching element   getAbsoluteOffsetFromBody   function  el          finds the offset of el from the body or html element     var  x   0      var  y   0      while  el  amp  amp   isNaN  el offsetLeft    amp  amp   isNaN  el offsetTop                    x    el offsetLeft - el scrollLeft   el clientLeft           y    el offsetTop - el scrollTop   el clientTop          el   el offsetParent            return   top   y  left   x       getAbsoluteOffsetFromGivenElement   function  el  relativeEl          finds the offset of el from relativeEl     var  x   0      var  y   0      while  el  amp  amp  el    relativeEl  amp  amp   isNaN  el offsetLeft    amp  amp   isNaN  el offsetTop                    x    el offsetLeft - el scrollLeft   el clientLeft           y    el offsetTop - el scrollTop   el clientTop          el   el offsetParent            return   top   y  left   x       getAbsoluteOffsetFromRelative   function  el          finds the offset of el from the first parent with position  relative     var  x   0      var  y   0      while  el  amp  amp   isNaN  el offsetLeft    amp  amp   isNaN  el offsetTop                    x    el offsetLeft - el scrollLeft   el clientLeft           y    el offsetTop - el scrollTop   el clientTop          el   el offsetParent          if  el    null                        if  getComputedStyle      undefined                   valString   getComputedStyle el  null  getPropertyValue  position                else                 valString   el currentStyle  position                if  valString      relative                   el   null                      return   top   y  left   x        If you are still having problems  particularly relating to scrolling  you could try looking at http   www greywyvern com  post 331 - I noticed at least one piece of questionable code in getStyle which should be fine assuming browsers behave  but haven t tested the rest at all

User · Answer

This is easy as two lines in JS   var elem   document getElementById  quot id quot        alert elem getBoundingClientRect

User · Answer

How about something like this  by passing ID of the element and it will return the left or top  we can also combine them   1  find left  function findLeft element      var rec   document getElementById element  getBoundingClientRect      return rec left   window scrollX      call it like findLeft   header      2  find top  function findTop element      var rec   document getElementById element  getBoundingClientRect      return rec top   window scrollY      call it like findTop   header      or 3  find left and top together  function findTopLeft element      var rec   document getElementById element  getBoundingClientRect      return  top  rec top   window scrollY  left  rec left   window scrollX       call it like findTopLeft   header

User · Answer

If page includes - at least- any  DIV   the function given by meouw throws the  Y  value beyond current page limits  In order to find the exact position  you need to handle both offsetParent s and parentNode s   Try the code given below  it is checked for FF2     var getAbsPosition   function el       var el2   el      var curtop   0      var curleft   0      if  document getElementById    document all            do                curleft    el offsetLeft-el scrollLeft              curtop    el offsetTop-el scrollTop              el   el offsetParent              el2   el2 parentNode              while  el2    el                    curleft -  el2 scrollLeft                  curtop -  el2 scrollTop                  el2   el2 parentNode                          while  el offsetParent          else if  document layers            curtop    el y          curleft    el x            return  curtop  curleft

User · Answer

This is the best code I ve managed to create  works in iframes as well  unlike jQuery s offset     Seems webkit has a bit of a different behavior   Based on meouw s comment   function getOffset  el         var  x   0      var  y   0      while  el  amp  amp   isNaN  el offsetLeft    amp  amp   isNaN  el offsetTop                x    el offsetLeft - el scrollLeft           y    el offsetTop - el scrollTop             chrome safari         if    browser webkit                el   el parentNode            else                  firefox IE             el   el offsetParent                      return   top   y  left   x

User · Answer

HTML elements on most browsers will have -  offsetLeft offsetTop   These specifiy the position of the element relative its nearest parent that has layout   This parent can often be accessed bif the offsetParent property   IE and FF3 have  clientLeft clientTop   These properties are less common  they specify an elements position with its parents client area  padded area is part of the client area but border and margin is not

User · Answer

The correct approach is to use element getBoundingClientRect     var rect   element getBoundingClientRect    console log rect top  rect right  rect bottom  rect left     Internet Explorer has supported this since as long as you are likely to care about and it was finally standardized in CSSOM Views  All other browsers adopted it a long time ago   Some browsers also return height and width properties  though this is non-standard   If you re worried about older browser compatibility  check this answer s revisions for an optimised degrading implementation   The values returned by element getBoundingClientRect   are relative to the viewport   If you need it relative to another element  simply subtract one rectangle from the other   var bodyRect   document body getBoundingClientRect        elemRect   element getBoundingClientRect        offset     elemRect top - bodyRect top   alert  Element is     offset     vertical pixels from  lt body gt

User · Answer

Get position of div in respect to left and Top     var elm       div id       get the div   var posY top   elm offset   top     get the position from top   var posX left   elm offset   left    get the position from left

User · Answer

If page includes - at least- any  DIV   the function given by meouw throws the  Y  value beyond current page limits  In order to find the exact position  you need to handle both offsetParent s and parentNode s   Try the code given below  it is checked for FF2     var getAbsPosition   function el       var el2   el      var curtop   0      var curleft   0      if  document getElementById    document all            do                curleft    el offsetLeft-el scrollLeft              curtop    el offsetTop-el scrollTop              el   el offsetParent              el2   el2 parentNode              while  el2    el                    curleft -  el2 scrollLeft                  curtop -  el2 scrollTop                  el2   el2 parentNode                          while  el offsetParent          else if  document layers            curtop    el y          curleft    el x            return  curtop  curleft

User · Answer

Difference between small and little  function getPosition  el         var x   0      var y   0      while  el  amp  amp   isNaN  el offsetLeft    amp  amp   isNaN  el offsetTop           x    el offsetLeft - el scrollLeft      y    el offsetTop - el scrollTop      el   el offsetParent            return   top  y  left  x        Look a example coordinates  http   javascript info tutorial coordinates

User · Answer

To get the total offset of an element  you could recursively sum up all parent offsets   function getParentOffsets el   number   if  el offsetParent        return el offsetParent offsetTop   getParentOffset el offsetParent     else       return 0        with this utility function the total top offset of a dom element is    el offsetTop   getParentOffsets el

User · Answer

How about something like this  by passing ID of the element and it will return the left or top  we can also combine them   1  find left  function findLeft element      var rec   document getElementById element  getBoundingClientRect      return rec left   window scrollX      call it like findLeft   header      2  find top  function findTop element      var rec   document getElementById element  getBoundingClientRect      return rec top   window scrollY      call it like findTop   header      or 3  find left and top together  function findTopLeft element      var rec   document getElementById element  getBoundingClientRect      return  top  rec top   window scrollY  left  rec left   window scrollX       call it like findTopLeft   header

User · Answer

I successfully used Andy E s solution to position a bootstrap 2 modal depending on what link in a table row a user clicks on  The page is a Tapestry 5 page and javascript below is imported in the java page class   javascript   function setLinkPosition clientId   var bodyRect   document body getBoundingClientRect    elemRect   clientId getBoundingClientRect    offset     elemRect top - bodyRect top  offset     offset   20      serviceLineModal   css  top   offset        My modal code    lt div id  serviceLineModal  class  modal hide fade add-absolute-position  data-backdrop  static    tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  style  top 50    gt   lt div class  modal-header  gt       lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt x lt  button gt       lt h3 id  myModalLabel  gt Modal header lt  h3 gt   lt  div gt    lt div class  modal-body  gt       lt t zone t id  modalZone  id  modalZone  gt           lt p gt You selected service line number    serviceLineNumberSelected  lt  p gt       lt  t zone gt   lt  div gt    lt div class  modal-footer  gt       lt button class  btn  data-dismiss  modal  aria-hidden  true  gt Close lt  button gt       lt  --  lt button class  btn btn-primary  gt Save changes lt  button gt  -- gt   lt  div gt      The link in the loop    lt t loop source  servicesToDisplay  value  service  encoder  encoder  gt   lt tr style  border-right  1px solid black   gt              lt td style  white-space nowrap   class  add-padding-left-and-right no-border  gt            lt a t type  eventLink  t event  serviceLineNumberSelected  t context  service serviceLineNumber               t zone  pageZone  t clientId  modalLink  service serviceLineNumber               onmouseover  setLinkPosition this    gt               lt i class  icon-chevron-down  gt  lt  i gt   lt  --   service serviceLineNumber  -- gt           lt  a gt       lt  td gt    And the java code in the page class   void onServiceLineNumberSelected String number       checkForNullSession        serviceLineNumberSelected   number      addOpenServiceLineDialogCommand        ajaxResponseRenderer addRender modalZone      protected void addOpenServiceLineDialogCommand         ajaxResponseRenderer addCallback new JavaScriptCallback              Override         public void run JavaScriptSupport javascriptSupport                javascriptSupport addScript      serviceLineModal   modal  show                             Hope this helps someone  this post helped out

User · Answer

You might be better served by using a JavaScript framework  that has functions to return such information  and so much more   in a browser-independant fashion  Here are a few    Prototype jQuery MooTools YUI  yahoo    With these frameworks  you could do something like     id-of-img   top to get the y-pixel coordinate of the image

User · Answer

You can add two properties to Element prototype to get the top left of any element   Object defineProperty  Element prototype   documentOffsetTop         get  function               return this offsetTop     this offsetParent   this offsetParent documentOffsetTop   0                Object defineProperty  Element prototype   documentOffsetLeft         get  function               return this offsetLeft     this offsetParent   this offsetParent documentOffsetLeft   0                 This is called like this   var x   document getElementById   myDiv    documentOffsetLeft    Here s a demo comparing the results to jQuery s offset   top and  left  http   jsfiddle net ThinkingStiff 3G7EZ

User · Answer

You might be better served by using a JavaScript framework  that has functions to return such information  and so much more   in a browser-independant fashion  Here are a few    Prototype jQuery MooTools YUI  yahoo    With these frameworks  you could do something like     id-of-img   top to get the y-pixel coordinate of the image

User · Answer

Difference between small and little  function getPosition  el         var x   0      var y   0      while  el  amp  amp   isNaN  el offsetLeft    amp  amp   isNaN  el offsetTop           x    el offsetLeft - el scrollLeft      y    el offsetTop - el scrollTop      el   el offsetParent            return   top  y  left  x        Look a example coordinates  http   javascript info tutorial coordinates

User · Answer

param  HTMLElement  el     return   top  number  left  number       function getDocumentOffsetPosition el        var position             top  el offsetTop          left  el offsetLeft            if  el offsetParent            var parentPosition   getDocumentOffsetPosition el offsetParent           position top    parentPosition top          position left    parentPosition left            return position     Thank ThinkingStiff for the answer  this is only another version

User · Answer

I did it like this so it was cross-compatible with old browsers      For really old browser s or incompatible ones     function getOffsetSum elem            var top   0              left   0              bottom   0              right   0           var width   elem offsetWidth           var height   elem offsetHeight           while  elem                top    elem offsetTop              left    elem offsetLeft              elem   elem offsetParent                      right   left   width           bottom   top   height           return               top  top              left  left              bottom  bottom              right  right                       function getOffsetRect elem            var box   elem getBoundingClientRect             var body   document body          var docElem   document documentElement           var scrollTop   window pageYOffset    docElem scrollTop    body scrollTop          var scrollLeft   window pageXOffset    docElem scrollLeft    body scrollLeft           var clientTop   docElem clientTop          var clientLeft   docElem clientLeft            var top   box top   scrollTop - clientTop          var left   box left   scrollLeft - clientLeft          var bottom   top    box bottom - box top           var right   left    box right - box left            return               top  Math round top               left  Math round left               bottom  Math round bottom               right  Math round right                        function getOffset elem            if  elem                if  elem getBoundingClientRect                    return getOffsetRect elem                 else      old browser                 return getOffsetSum elem                           else             return null          More about coordinates in JavaScript here  http   javascript info tutorial coordinates

User · Answer

The cleanest approach I have found is a simplified version of the technique used by jQuery s offset   Similar to some of the other answers it starts with getBoundingClientRect  it then uses the window and the documentElement to adjust for scroll position as well as things like the margin on the body  often the default      var rect   el getBoundingClientRect    var docEl   document documentElement   var rectTop   rect top   window pageYOffset - docEl clientTop  var rectLeft   rect left   window pageXOffset - docEl clientLeft     x000D   x000D  var els   document getElementsByTagName  div    x000D  var docEl   document documentElement  x000D   x000D  for  var i   0  i  lt  els length  i      x000D   x000D    var rect   els i  getBoundingClientRect    x000D   x000D    var rectTop   rect top   window pageYOffset - docEl clientTop  x000D    var rectLeft   rect left   window pageXOffset - docEl clientLeft  x000D   x000D    els i  innerHTML     lt b gt     rectLeft          rectTop     lt  b gt    x000D    x000D  div   x000D    width  100px  x000D    height  100px  x000D    background-color  red  x000D    border  1px solid black  x000D    x000D   rel   x000D    position  relative  x000D    left  10px  x000D    top  10px  x000D    x000D   abs   x000D    position  absolute  x000D    top  250px  x000D    left  250px  x000D    x000D   lt div id  rel  gt  lt  div gt  x000D   lt div id  abs  gt  lt  div gt  x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

if using jQuery  the dimensions plugin is excellent and allows you specify exactly what you want   e g   Relative position  absolute position  absolute position without padding  with padding     It goes on  let s just say there is a lot you can do with it   Plus the bonus of using jQuery is it s lightweight file size and easy use  you won t go back to JavaScript without it afterwards

User · Answer

param  HTMLElement  el     return   top  number  left  number       function getDocumentOffsetPosition el        var position             top  el offsetTop          left  el offsetLeft            if  el offsetParent            var parentPosition   getDocumentOffsetPosition el offsetParent           position top    parentPosition top          position left    parentPosition left            return position     Thank ThinkingStiff for the answer  this is only another version

User · Answer

Get position of div in respect to left and Top     var elm       div id       get the div   var posY top   elm offset   top     get the position from top   var posX left   elm offset   left    get the position from left

User · Answer

You might be better served by using a JavaScript framework  that has functions to return such information  and so much more   in a browser-independant fashion  Here are a few    Prototype jQuery MooTools YUI  yahoo    With these frameworks  you could do something like     id-of-img   top to get the y-pixel coordinate of the image

User · Answer

To retrieve the position relative to the page efficiently  and without using a recursive function   includes IE also   var element   document getElementById  elementId      replace elementId with your element s Id  var rect   element getBoundingClientRect    var elementLeft elementTop    x and y var scrollTop   document documentElement scrollTop                  document documentElement scrollTop document body scrollTop  var scrollLeft   document documentElement scrollLeft                                      document documentElement scrollLeft document body scrollLeft  elementTop   rect top scrollTop  elementLeft   rect left scrollLeft

User · Answer

jQuery  offset   will get the current coordinates of the first element  or set the coordinates of every element  in the set of matched elements  relative to the document

User · Answer

HTML elements on most browsers will have -  offsetLeft offsetTop   These specifiy the position of the element relative its nearest parent that has layout   This parent can often be accessed bif the offsetParent property   IE and FF3 have  clientLeft clientTop   These properties are less common  they specify an elements position with its parents client area  padded area is part of the client area but border and margin is not

User · Answer

The libraries go to some lengths to get accurate offsets for an element  here s a simple function that does the job in every circumstances that I ve tried   function getOffset  el         var  x   0      var  y   0      while  el  amp  amp   isNaN  el offsetLeft    amp  amp   isNaN  el offsetTop                x    el offsetLeft - el scrollLeft           y    el offsetTop - el scrollTop          el   el offsetParent            return   top   y  left   x      var x   getOffset  document getElementById  yourElId     left

User · Answer

I did it like this so it was cross-compatible with old browsers      For really old browser s or incompatible ones     function getOffsetSum elem            var top   0              left   0              bottom   0              right   0           var width   elem offsetWidth           var height   elem offsetHeight           while  elem                top    elem offsetTop              left    elem offsetLeft              elem   elem offsetParent                      right   left   width           bottom   top   height           return               top  top              left  left              bottom  bottom              right  right                       function getOffsetRect elem            var box   elem getBoundingClientRect             var body   document body          var docElem   document documentElement           var scrollTop   window pageYOffset    docElem scrollTop    body scrollTop          var scrollLeft   window pageXOffset    docElem scrollLeft    body scrollLeft           var clientTop   docElem clientTop          var clientLeft   docElem clientLeft            var top   box top   scrollTop - clientTop          var left   box left   scrollLeft - clientLeft          var bottom   top    box bottom - box top           var right   left    box right - box left            return               top  Math round top               left  Math round left               bottom  Math round bottom               right  Math round right                        function getOffset elem            if  elem                if  elem getBoundingClientRect                    return getOffsetRect elem                 else      old browser                 return getOffsetSum elem                           else             return null          More about coordinates in JavaScript here  http   javascript info tutorial coordinates

User · Answer

if using jQuery  the dimensions plugin is excellent and allows you specify exactly what you want   e g   Relative position  absolute position  absolute position without padding  with padding     It goes on  let s just say there is a lot you can do with it   Plus the bonus of using jQuery is it s lightweight file size and easy use  you won t go back to JavaScript without it afterwards

User · Answer

This is the best code I ve managed to create  works in iframes as well  unlike jQuery s offset     Seems webkit has a bit of a different behavior   Based on meouw s comment   function getOffset  el         var  x   0      var  y   0      while  el  amp  amp   isNaN  el offsetLeft    amp  amp   isNaN  el offsetTop                x    el offsetLeft - el scrollLeft           y    el offsetTop - el scrollTop             chrome safari         if    browser webkit                el   el parentNode            else                  firefox IE             el   el offsetParent                      return   top   y  left   x

User · Answer

To get the total offset of an element  you could recursively sum up all parent offsets   function getParentOffsets el   number   if  el offsetParent        return el offsetParent offsetTop   getParentOffset el offsetParent     else       return 0        with this utility function the total top offset of a dom element is    el offsetTop   getParentOffsets el

User · Answer

if using jQuery  the dimensions plugin is excellent and allows you specify exactly what you want   e g   Relative position  absolute position  absolute position without padding  with padding     It goes on  let s just say there is a lot you can do with it   Plus the bonus of using jQuery is it s lightweight file size and easy use  you won t go back to JavaScript without it afterwards

User · Answer

I successfully used Andy E s solution to position a bootstrap 2 modal depending on what link in a table row a user clicks on  The page is a Tapestry 5 page and javascript below is imported in the java page class   javascript   function setLinkPosition clientId   var bodyRect   document body getBoundingClientRect    elemRect   clientId getBoundingClientRect    offset     elemRect top - bodyRect top  offset     offset   20      serviceLineModal   css  top   offset        My modal code    lt div id  serviceLineModal  class  modal hide fade add-absolute-position  data-backdrop  static    tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  style  top 50    gt   lt div class  modal-header  gt       lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt x lt  button gt       lt h3 id  myModalLabel  gt Modal header lt  h3 gt   lt  div gt    lt div class  modal-body  gt       lt t zone t id  modalZone  id  modalZone  gt           lt p gt You selected service line number    serviceLineNumberSelected  lt  p gt       lt  t zone gt   lt  div gt    lt div class  modal-footer  gt       lt button class  btn  data-dismiss  modal  aria-hidden  true  gt Close lt  button gt       lt  --  lt button class  btn btn-primary  gt Save changes lt  button gt  -- gt   lt  div gt      The link in the loop    lt t loop source  servicesToDisplay  value  service  encoder  encoder  gt   lt tr style  border-right  1px solid black   gt              lt td style  white-space nowrap   class  add-padding-left-and-right no-border  gt            lt a t type  eventLink  t event  serviceLineNumberSelected  t context  service serviceLineNumber               t zone  pageZone  t clientId  modalLink  service serviceLineNumber               onmouseover  setLinkPosition this    gt               lt i class  icon-chevron-down  gt  lt  i gt   lt  --   service serviceLineNumber  -- gt           lt  a gt       lt  td gt    And the java code in the page class   void onServiceLineNumberSelected String number       checkForNullSession        serviceLineNumberSelected   number      addOpenServiceLineDialogCommand        ajaxResponseRenderer addRender modalZone      protected void addOpenServiceLineDialogCommand         ajaxResponseRenderer addCallback new JavaScriptCallback              Override         public void run JavaScriptSupport javascriptSupport                javascriptSupport addScript      serviceLineModal   modal  show                             Hope this helps someone  this post helped out

User · Answer

HTML elements on most browsers will have -  offsetLeft offsetTop   These specifiy the position of the element relative its nearest parent that has layout   This parent can often be accessed bif the offsetParent property   IE and FF3 have  clientLeft clientTop   These properties are less common  they specify an elements position with its parents client area  padded area is part of the client area but border and margin is not

User · Answer

The cleanest approach I have found is a simplified version of the technique used by jQuery s offset   Similar to some of the other answers it starts with getBoundingClientRect  it then uses the window and the documentElement to adjust for scroll position as well as things like the margin on the body  often the default      var rect   el getBoundingClientRect    var docEl   document documentElement   var rectTop   rect top   window pageYOffset - docEl clientTop  var rectLeft   rect left   window pageXOffset - docEl clientLeft     x000D   x000D  var els   document getElementsByTagName  div    x000D  var docEl   document documentElement  x000D   x000D  for  var i   0  i  lt  els length  i      x000D   x000D    var rect   els i  getBoundingClientRect    x000D   x000D    var rectTop   rect top   window pageYOffset - docEl clientTop  x000D    var rectLeft   rect left   window pageXOffset - docEl clientLeft  x000D   x000D    els i  innerHTML     lt b gt     rectLeft          rectTop     lt  b gt    x000D    x000D  div   x000D    width  100px  x000D    height  100px  x000D    background-color  red  x000D    border  1px solid black  x000D    x000D   rel   x000D    position  relative  x000D    left  10px  x000D    top  10px  x000D    x000D   abs   x000D    position  absolute  x000D    top  250px  x000D    left  250px  x000D    x000D   lt div id  rel  gt  lt  div gt  x000D   lt div id  abs  gt  lt  div gt  x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

If you want it done only in javascript  here are some one liners  using getBoundingClientRect    window scrollY   document querySelector   elementId   getBoundingClientRect   top    Y  window scrollX   document querySelector   elementId   getBoundingClientRect   left    X   The first line will return offsetTop say Y relative to document  The second line will return offsetLeft say X relative to document   getBoundingClientRect   is a javascript function that returns the position of the element relative to viewport of window

User · Answer

To retrieve the position relative to the page efficiently  and without using a recursive function   includes IE also   var element   document getElementById  elementId      replace elementId with your element s Id  var rect   element getBoundingClientRect    var elementLeft elementTop    x and y var scrollTop   document documentElement scrollTop                  document documentElement scrollTop document body scrollTop  var scrollLeft   document documentElement scrollLeft                                      document documentElement scrollLeft document body scrollLeft  elementTop   rect top scrollTop  elementLeft   rect left scrollLeft

User · Answer

HTML elements on most browsers will have -  offsetLeft offsetTop   These specifiy the position of the element relative its nearest parent that has layout   This parent can often be accessed bif the offsetParent property   IE and FF3 have  clientLeft clientTop   These properties are less common  they specify an elements position with its parents client area  padded area is part of the client area but border and margin is not

User · Answer

Just thought I d throw this out there as well   I haven t been able to test it in older browsers  but it works in the latest of the top 3       Element prototype getOffsetTop   function         return   this parentElement    this offsetTop   this parentElement getOffsetTop    this offsetTop     Element prototype getOffsetLeft   function         return   this parentElement    this offsetLeft   this parentElement getOffsetLeft    this offsetLeft     Element prototype getOffset   function         return   left  this getOffsetLeft    top  this getOffsetTop

User · Answer

While this is very likely to be lost at the bottom of so many answers  the top solutions here were not working for me  As far as I could tell neither would any of the other answers have helped    Situation  In an HTML5 page I had a menu that was a nav element inside a header  not THE header but a header in another element   I wanted the navigation to stick to the top once a user scrolled to it  but previous to this the header was absolute positioned  so I could have it overlay something else slightly   The solutions above never triggered a change because  offsetTop was not going to change as this was an absolute positioned element  Additionally the  scrollTop property was simply the top of the top most element    that is to say 0 and always would be 0  Any tests I performed utilizing these two  and same with getBoundingClientRect results  would not tell me if the top of the navigation bar ever scrolled to the top of the viewable page  again  as reported in console  they simply stayed the same numbers while scrolling occurred     Solution  The solution for me was utilizing   window visualViewport pageTop   The value of the pageTop property reflects the viewable section of the screen  therefore allowing me to track where an element is in reference to the boundaries of the viewable area   Probably unnecessary to say  anytime I am dealing with scrolling I expect to use this solution to programatically respond to movement of elements being scrolled    Hope it helps someone else  IMPORTANT NOTE  This appears to work in Chrome and Opera currently  amp  definitely not in Firefox  6-2018     until Firefox supports visualViewport I recommend NOT using this method   and I hope they do soon    it makes a lot more sense than the rest    UPDATE   Just a note regarding this solution  While I still find what I discovered to be very valuable for situations in which     programmatically respond to movement of elements being scrolled   is applicable  The better solution for the problem that I had was to use CSS to set position  sticky on the element  Using sticky you can have an element stay at the top without using javascript  NOTE  there are times this will not work as effectively as changing the element to fixed but for most uses the sticky approach will likely be superior   UPDATE01   So I realized that for a different page I had a requirement where I needed to detect the position of an element in a mildly complex scrolling setup  parallax plus elements that scroll past as part of a message   I realized in that scenario that the following provided the value I utilized to determine when to do something     let bodyElement   document getElementsByTagName  body   0     let elementToTrack   bodyElement querySelector   trackme      trackedObjPos   elementToTrack getBoundingClientRect   top    if trackedObjPos  gt  264          bodyElement style cssText             Hope this answer is more widely useful now

User · Answer

You might be better served by using a JavaScript framework  that has functions to return such information  and so much more   in a browser-independant fashion  Here are a few    Prototype jQuery MooTools YUI  yahoo    With these frameworks  you could do something like     id-of-img   top to get the y-pixel coordinate of the image

User · Answer

The libraries go to some lengths to get accurate offsets for an element  here s a simple function that does the job in every circumstances that I ve tried   function getOffset  el         var  x   0      var  y   0      while  el  amp  amp   isNaN  el offsetLeft    amp  amp   isNaN  el offsetTop                x    el offsetLeft - el scrollLeft           y    el offsetTop - el scrollTop          el   el offsetParent            return   top   y  left   x      var x   getOffset  document getElementById  yourElId     left

User · Answer

After much research and testing this seems to work  function getPosition e        var isNotFirefox    navigator userAgent toLowerCase   indexOf  firefox      -1       var x   0  y   0      while  e            x    e offsetLeft - e scrollLeft    isNotFirefox   e clientLeft   0           y    e offsetTop - e scrollTop    isNotFirefox   e clientTop   0           e   e offsetParent            return   x  x   window scrollX  y  y   window scrollY        see http   jsbin com xuvovalifo edit html js output

User · Answer

The libraries go to some lengths to get accurate offsets for an element  here s a simple function that does the job in every circumstances that I ve tried   function getOffset  el         var  x   0      var  y   0      while  el  amp  amp   isNaN  el offsetLeft    amp  amp   isNaN  el offsetTop                x    el offsetLeft - el scrollLeft           y    el offsetTop - el scrollTop          el   el offsetParent            return   top   y  left   x      var x   getOffset  document getElementById  yourElId     left

User · Answer

The libraries go to some lengths to get accurate offsets for an element  here s a simple function that does the job in every circumstances that I ve tried   function getOffset  el         var  x   0      var  y   0      while  el  amp  amp   isNaN  el offsetLeft    amp  amp   isNaN  el offsetTop                x    el offsetLeft - el scrollLeft           y    el offsetTop - el scrollTop          el   el offsetParent            return   top   y  left   x      var x   getOffset  document getElementById  yourElId     left

User · Answer

While this is very likely to be lost at the bottom of so many answers  the top solutions here were not working for me  As far as I could tell neither would any of the other answers have helped    Situation  In an HTML5 page I had a menu that was a nav element inside a header  not THE header but a header in another element   I wanted the navigation to stick to the top once a user scrolled to it  but previous to this the header was absolute positioned  so I could have it overlay something else slightly   The solutions above never triggered a change because  offsetTop was not going to change as this was an absolute positioned element  Additionally the  scrollTop property was simply the top of the top most element    that is to say 0 and always would be 0  Any tests I performed utilizing these two  and same with getBoundingClientRect results  would not tell me if the top of the navigation bar ever scrolled to the top of the viewable page  again  as reported in console  they simply stayed the same numbers while scrolling occurred     Solution  The solution for me was utilizing   window visualViewport pageTop   The value of the pageTop property reflects the viewable section of the screen  therefore allowing me to track where an element is in reference to the boundaries of the viewable area   Probably unnecessary to say  anytime I am dealing with scrolling I expect to use this solution to programatically respond to movement of elements being scrolled    Hope it helps someone else  IMPORTANT NOTE  This appears to work in Chrome and Opera currently  amp  definitely not in Firefox  6-2018     until Firefox supports visualViewport I recommend NOT using this method   and I hope they do soon    it makes a lot more sense than the rest    UPDATE   Just a note regarding this solution  While I still find what I discovered to be very valuable for situations in which     programmatically respond to movement of elements being scrolled   is applicable  The better solution for the problem that I had was to use CSS to set position  sticky on the element  Using sticky you can have an element stay at the top without using javascript  NOTE  there are times this will not work as effectively as changing the element to fixed but for most uses the sticky approach will likely be superior   UPDATE01   So I realized that for a different page I had a requirement where I needed to detect the position of an element in a mildly complex scrolling setup  parallax plus elements that scroll past as part of a message   I realized in that scenario that the following provided the value I utilized to determine when to do something     let bodyElement   document getElementsByTagName  body   0     let elementToTrack   bodyElement querySelector   trackme      trackedObjPos   elementToTrack getBoundingClientRect   top    if trackedObjPos  gt  264          bodyElement style cssText             Hope this answer is more widely useful now

User · Answer

If you are using jQuery  this could be a simple solution    lt script gt    var el       element      var position   el position      console log   left      position left      top      position top     lt  script gt

User · Answer

If you want it done only in javascript  here are some one liners  using getBoundingClientRect    window scrollY   document querySelector   elementId   getBoundingClientRect   top    Y  window scrollX   document querySelector   elementId   getBoundingClientRect   left    X   The first line will return offsetTop say Y relative to document  The second line will return offsetLeft say X relative to document   getBoundingClientRect   is a javascript function that returns the position of the element relative to viewport of window

User · Answer

Just thought I d throw this out there as well   I haven t been able to test it in older browsers  but it works in the latest of the top 3       Element prototype getOffsetTop   function         return   this parentElement    this offsetTop   this parentElement getOffsetTop    this offsetTop     Element prototype getOffsetLeft   function         return   this parentElement    this offsetLeft   this parentElement getOffsetLeft    this offsetLeft     Element prototype getOffset   function         return   left  this getOffsetLeft    top  this getOffsetTop

[javascript] Retrieve the position (X,Y) of an HTML element relative to the browser window

Examples related to javascript

Examples related to html

Examples related to css

Examples related to dom

Examples related to position