An element with a property of
position: relative sets up a new positioning context for
itself and any descendant that has a property of
position: absolute. The element remains in its original
position in the normal document flow.
The offset properties top right bottom left can be used
to re-position the element relative to its original position.
If re-positioned, the space it occupied originally is visually
maintained and the re-positioned element will overlay any elements
occupying the space in its new position.
In the example above, the highlighted box is moved 5 units down from the top and 7 units to the left of its original position (the box's top left corner). The space it originally occupied is retained, as shown by the empty frame.
The red dot (with postion: absolute), nested and centered
in the box, moves with it, maintaining its position when the window is
resized.
On the left there is a dark blue dot whose element (in the HTML) is nested inside the third box. When it is moved 50 units from the top and 15 units to the left rather than being moved relative to the box element it is nested within, it is moved relative to the viewport as:
position: static )
transform perspective or filter property
(which can establish a new positioning context) has been set on an
ancestor element