Static
Static is the default position for all the HTML elements.
Static, effectively doesn’t do much, it just means the element like an image or text will follow the normal flow of the page/DOM.
Static elements are a bit shit and kinda lazy, static positioned elements cannot have the z-index, top, left, right, or bottom properties applied to them.
If Static was a TV character, it would be Onslow from Keeping Up Appearances
Static example
Relative Position
Relative positions are pretty similar to static positions, but you can add z-index, top, left, right, and bottom properties to it.
Relative positions go with the normal flow, but can be taken out of the flow (kind of) by adding properties for its position.
Think of relative position like a dog surfer. For no reason at all.
Only joking, because it goes with the flow, but if you shout at it really loudly, you can make it move in specific directions. Maybe.
Absolute Position
Absolute position, removes the element from the normal document flow.
It goes where it wants, regardless of other elements.
The other elements are not moved or effected by an absolute element.
Absolute positioned elements have their width defaulted to auto instead of being full width like a div
https://blog.webdevsimplified.com/2022-01/css-position/
In the above image, the “one” class/element is given 0 for the top and left properties, so it remains in the default position, on the top left of the screen.
Fixed Position
A fixed position in css, is based on the users viewport. A fixed postion element stays in the same place on the users screen, even when the user scrolls.
below is how w3 schools describe fixed positioning:
Sticky Positioning
Sticky elements, stick to the users viewport.
Here’s an example, the heading “do you know all about sticky element”:
One final, pratical example of positioning :
CSS Grid with Image and Text Side by Side Example
Here’s another example from css-tricks.com
Grid and flexbox are classed as layouts, rather than positions, which is kind of bollocks in that you use them to position elements.