more details there
offsetParent - "parent in the render tree" - the closest cell in the table, body for static positioning, or closest positioned element for other types of positioning.
offsetLeft / offsetTop - position in pixels of the upper left corner of the block, relative to its offsetParent.
offsetWidth / offsetHeight - "outer" width / height of the block, including borders.
clientLeft / clientTop - The indentation of the content area from the top-left corner of the element. If the operating system places vertical scrolling on the right, then they are equal to the widths of the left / top frame, if on the left (OS in Hebrew, Arabic), then clientLeft includes scrolling.
clientWidth / clientHeight - the width / height of the content along with padding, but no scrollbar.
scrollWidth / scrollHeight - the width / height of the content, including the scrollable area. Includes padding and does not include scrollbars.
scrollLeft / scrollTop - the width / height of the scrolled part of the document, calculated from the top left corner.Madeline White
To place the code, please use CodePen or similar tool. Thanks you!