CSS Positions Explained [2022]

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: