offsetParent in JavaScript, Explained
What element.offsetParent actually returns, how it relates to offsetTop and offsetLeft, and the positioning rules that decide which ancestor becomes the offset parent.
6 min read - Updated 2026-06-19
offsetParent trips people up because the element it returns depends on CSS positioning, not the DOM tree. Here is exactly what it returns, when it returns null, and how to use it correctly for measuring positions.
What offsetParent returns
element.offsetParent returns the nearest ancestor that the element is positioned relative to for offsetTop and offsetLeft. It is not simply the parent node - it is the closest ancestor with a CSS position other than static (or special elements like the table cell, body, or td).
Nearest ancestor with position: relative, absolute, fixed, or sticky
Falls back to the body if no positioned ancestor exists
td, th, and table can also act as offset parents
offsetTop and offsetLeft are measured relative to this element
When offsetParent is null
offsetParent returns null in a few specific cases, and knowing them prevents confusing measurement bugs. The most common is an element that is not rendered, but display: none and fixed positioning also return null in most browsers.
The element has display: none
The element (or an ancestor) is detached from the document
The element itself has position: fixed
It is the root html or body element
offsetParent vs getBoundingClientRect
offsetTop and offsetLeft give you position relative to the offsetParent, which is useful for layout math inside a positioned container. But if you want the position relative to the viewport, getBoundingClientRect() is usually the better tool because it does not depend on which ancestor happens to be positioned.
offsetTop/Left: relative to offsetParent, integer pixels
getBoundingClientRect(): relative to the viewport, subpixel precision
Use offsetParent math for in-container positioning
Use getBoundingClientRect for scroll and collision detection
Release checklist
Confirm the ancestor you expect actually has a non-static position.
Handle the null case before reading offsetTop or offsetLeft.
Prefer getBoundingClientRect for viewport-relative measurements.
Test measurements across breakpoints where positioning changes.
Frequently asked questions
What is offsetParent in JavaScript?
It is the nearest ancestor element that the element is positioned relative to for its offsetTop and offsetLeft values - typically the closest ancestor with a CSS position other than static.
Why is offsetParent null?
offsetParent is null when the element has display: none, is detached from the document, has position: fixed, or is the root html/body element.
Should I use offsetParent or getBoundingClientRect?
Use offsetTop/offsetLeft (which depend on offsetParent) for positioning math inside a container. Use getBoundingClientRect() when you need position relative to the viewport, such as for scroll or collision detection.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.