When we set the offset top property
of an element with position property
set as relative,
the element actually moves away from
the top edge of the screen or the
container element.
That is because the element is pushed
from the top towards bottom:
In the above code,
we can see that the position
of the element with class
relative appears 50px
away from the top edge.
This is because we have added
the position property as
relative with top offset
of 50px to the element with
class relative.
The other offset values are
right, bottom, and left,
that can be applied to further adjust the element's
placement within its container.
Lets look at another example:
In the above example, we applied offset values of
top and left to the relative-sub-heading class,
and bottom and left to the next and previous button classes,
allowing precise adjustments to the position of both elements.