๐Ÿ”ฐcoordinates

browser โŸฉ concepts โŸฉ coordinate system

There are 3 different coordinate systems:

  • document coordinates

  • viewport coordinates - also called "window coordinates".

  • container coordinates - relatively positioned container with top/left = 0.

client-side JavaScript tends to use viewport coordinates:

๐Ÿ‘‰ window window scrolling

window.scrollTo() takes the x and y coordinates in document coordinates.

๐Ÿ‘‰ CSS position

"position"   "top/left" relative to               removed from flow
-----------------------------------------------------------------------
fixed        `viewport`                                  โœ… 
relative     where it should be                          โŒ 
absolute     `document` / nearest positioned parent      โœ… 

Last updated