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)
boxes 2a and 2b & 2c represent
Box 2a to centre of screen.
Box 2b near to top right
- box 2b is parent of 2c
Box 2c (child) is set as
position: absolute; to keep its
anchor point same as its parent (2b)
NOTE...
The TOP:value when used with a STICKY position:
means that when the user SCROLLS down
the STICKY element will be fixed in position at
the value that was set. Eg if top: 20px; was used
then the element will stay on screen at 20px from the
top and not disappear from view.
It does this as long as it's PARENT element is on screen.
Scroll up/down to see what happens to the
boxes in this pane.
NOTE
There are no FIXED boxes displayed
for 1a / 1b or 1c as no
Left/Right/Top or BOTTOM
positioning was set.
boxes 3a and 3b & 3c represent
Box 3a to centre of screen.
Box 3b near to top right
- box 3b is parent of 3c
Box 3c (child) is set as
position: absolute; to keep its
anchor point same as its parent (3b)
I just need a FILLER section to
add extra to the bottom of the page
so I can SCROLL down to see
what happens with my boxes
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
And I also think I need a really long line of text here to enable the bottom scroll bar (horizontal) to actually work then I can see what happens then.