If the viewport is seen as Q IV in a coordinate plane. the origin is at top left. With
x along the horizontal axis, less than zero is out of the viewport on the left, greater than window width is out of the viewport on the right. If we start moving the reference point (origin) around, everything gets pretty confusing in short order.
In this picture, with
y along the vertical axis, less than zero is out of the viewport on the top, and greater than window height is out of the viewport on the bottom.
y is in absolute terms (positive) despite being in a negative quadrant (Q IV).
The initial CSS has position set as
relative which defaults to top left. Consequently this is the starting value, and animate shifts the object relative to this point, This is the constraining factor, and why we must use
top. The object does not have any
bottom reference axies.