There are FIVE main types of POSTION values :-
STATIC / RELATIVE / ABSOLUTE /
FIXED / STICKY
position:static; Default value. Elements render in order, as they appear in the document flow.
position:relative; The element is positioned relative to its normal position,
so "left:20px" adds 20 pixels to the element's LEFT position - its effect is to move the element to the Right
and "top:20px" adds 20 pixels to its top position - its effect is to move the element Down.
This can result in elements that overlap in which case you have to use the z-index property in
order to decide which element is displayed on top of the other element(s).
Highest z-index property value is placed on top
position:absolute; The element is positioned relative to its FIRST positioned (not static) parent/ancestor element.
position:fixed; The element is positioned relative to the browser window.
position:sticky; The element is positioned based on the user's scroll position
A sticky element toggles between relative and fixed, depending on the scroll position.
It is positioned relative until a given offset position is met in the viewport - then it "sticks" in
place (like position:fixed).
Note:
position: ...; on it's own doesn't do anything. It needs to be used with, eg...
left: 10px; / top: 10px; / right: 10px / bottom: 10px;
but not left: AND right ... or top: AND bottom:
as it can't move from the left AND the right at the same time (or Top & bottom)
This position:absolute is different...it places the elements by using it's FIRST ancestor/parent
that has a position:absolute (or relative or fixed - but NOT static) as a start point.
So I included a <div style="position:absolute;"> to anchor the display boxes to it...
(a div with a purple border), otherwise they were displayed right at the top of the page.