Coordinates

To move and position elements on the screen in the browser, there is a coordinate system. The coordinate axes start at the top left corner of the screen and extend to the right for the x axis and downward for the y axis.

Positioning with coordinates can be relative to the browser window or relative to a specific element. There are two coordinate systems in total: one starts from the corner of the HTML page (document), and the other from the corner of the browser window. The first can determine how an element is positioned relative to the entire page, while the second — how an element is positioned relative to the browser window and what is there. Mouse event objects and touch events contain the coordinates of where the event occurred on the screen and in the document: pageX/pageY — for the document, clientX/clientY — for the screen.

The coordinates of an element are the distance in pixels from the axes of the coordinate system to its top left corner. Using the element's method getBoundingClientRect(), you can get detailed information about the coordinates of the element and its size.

        
          
          document.addEventListener('click', event => {  console.log('Position x relative to the document', event.pageX)  console.log('Position y relative to the document', event.pageY)  console.log('Position x relative to the screen', event.clientX)  console.log('Position y relative to the screen', event.clientY)}, false)// { x: ..., y: ..., top: ..., left: ..., right: ..., bottom: ... }const rect = element.getBoundingClientRect()
          document.addEventListener('click', event => {
  console.log('Position x relative to the document', event.pageX)
  console.log('Position y relative to the document', event.pageY)

  console.log('Position x relative to the screen', event.clientX)
  console.log('Position y relative to the screen', event.clientY)
}, false)

// { x: ..., y: ..., top: ..., left: ..., right: ..., bottom: ... }
const rect = element.getBoundingClientRect()

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The coordinate system in the browser is similar to the flat coordinate system from school algebra. There are two axes: the y axis and the x axis, on this plane, all elements of the site are located. The only difference from the classical coordinate system is that the positive direction of the y axis in the browser is rotated downwards. This means that elements with a positive value on the y axis will be located below the x axis, while those with a negative value will be at the top.

The position of an element is set by the number of pixels from the beginning of the coordinate system along the corresponding axis.

The beginning of the coordinate system can be measured relative to the browser window or relative to the entire document. When the page is not scrolled, the beginnings of these axes coincide at the top left corner of the window. If you scroll the page down, then accordingly the beginning of the document's coordinates will remain the same, while the beginning of the window's coordinate axis will shift. Such separation can be useful for different tasks, for example, you can animate elements only when they come on screen, calculating coordinates relative to the document. Or you can allow dragging any element, but only within the browser window.

In the drawings, pageX and pageY — are the coordinate system axes relative to the document, and clientX and clientY — are the axes of the coordinate system relative to the browser window. Accordingly, pageXOffset and pageYOffset — are offsets relative to the entire document, while clientXOffset and clientYOffset — are relative to the window. In practice, very similar names are used, so for the current examples we will use them.

Below is a diagram of the coordinate axes when the page is not scrolled. In this state, the axes coincide, and the coordinates of elements relative to the window and relative to the document will match.

But if the page is scrolled (for example, down), then the situation will change. The beginning of the document will go up, and thus the beginning of the coordinate axes. The coordinate axes of the window will now start where we stop scrolling.

💡 It is worth noting that coordinates are the distance from the axes to its top left corner. Thus, the arrows in the diagram start from the corner of the element with the text Button.

In the mouse event object, you can find out where the event occurred relative to the coordinate system of the window from the fields clientX/clientY, for example, click.

If you need to know how an element is positioned relative to the window, the method getBoundingClientRect() will help. Calling this method returns an object with the fields x, y, top, left, right, bottom, width, and height, that is, complete information about the geometry of the element. The fields x and y contain the coordinates of the element.

💡 Positioning relative to the window is much easier to understand if you look at how an element with position: fixed is positioned. An element with this property will remain in the window at the same coordinates, regardless of how much the document is scrolled.

If you need to obtain data on where in the document the event occurred, you can find out from the fields pageX/pageY in the event object.

Information about how an element is positioned relative to the document cannot be obtained from any property or method; it must be calculated independently. The simplest way to do this is to add the coordinates relative to the window from the method getBoundingClientRect() with the offset of the window relative to the document. The offset of the browser window can be found out from the fields window.pageXOffset and window.pageYOffset — this is the number of pixels by which the document has been scrolled horizontally and vertically.

        
          
          const rect = element.getBoundingClientRect()console.log('Offset X relative to the document:', rect.x + pageXOffset)console.log('Offset Y relative to the document:', rect.y + pageYOffset)
          const rect = element.getBoundingClientRect()

console.log('Offset X relative to the document:', rect.x + pageXOffset)
console.log('Offset Y relative to the document:', rect.y + pageYOffset)

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

💡 Positioning relative to the document can also be understood if you look at how an element is positioned with position: absolute. When the window is scrolled, this element will move along with it.

You can visually see how axes work and how elements are positioned in the demo. In the initial state, the positions of the axes and the elements that are positioned relative to them coincide. The axes relative to the screen are made larger so that they are always visible. If you scroll the page vertically or horizontally, you will see how the axes relative to the screen remain in place, while the axes relative to the document move along with the scrolling motion.

        
          
          const x = 100const y = 200const foundElement = document.elementFromPoint(x, y)
          const x = 100
const y = 200

const foundElement = document.elementFromPoint(x, y)

        
        
          
            
            Copy
            Copied
            Failed to copy