What is the reference point (origin) for an element with position: absolute?

An absolutely positioned element is placed relative to its nearest positioned ancestor — and if there isn't one, relative to the browser window.

A "positioned ancestor" means any enclosing element that itself has a position of relative, absolute, or fixed. The absolutely positioned child measures its top/left/right/bottom offsets from the edges of that ancestor. If no ancestor is positioned, the offsets are measured from the viewport (the browser window) instead.

#parent {
  /* This makes #parent the positioning context */
  position: relative;
  margin: 20px;
}
#child {
  position: absolute;
  /* Top-left corner sits at the parent's top-left */
  top: 0;
  left: 0;
}

Tip: the classic recipe is to put position: relative on the container you want to anchor against — even without any offsets of its own, it just establishes the coordinate system. Then any absolutely positioned children are placed inside it rather than escaping to the whole page.

Go deeper:

• MDN — position — every value (relative/absolute/fixed/sticky) with live scrolling demos that make the "nearest positioned ancestor" rule click.