Has anyone seen a CSS relative positioning explanation that directly aligns with mathematical coordinate logic?
You may need to explain in more detail what you mean by “mathematical coordinate logic”. Relative position is based on moving the “normal” positioning of an element, by offsetting it a chosen distance from a chosen side. That sounds pretty coordinatey to me, but maybe your request is different.
The page is the 4th quadrant of a Cartesian plane, with the Y values multiplied by -1. (Alteratively: It’s the 1st quadrant of a reflected plane about the X axis.)
An element’s origin is defined by its parent context; to wit, margins, padding, etc.
Relative coordinates are relative to the element’s origin; Absolute coordinates are relative to the page’s origin.