CSS “position” attribute is central to the mechanism of layout of HTML elements. You’ll learn:

• what position is all about
• ways to use position:
• position: absolute, fixed, relative

I am writing this in 2022, learning CSS myself. I’ve had a working knowledge of some of the CSS mechanics for a long time, but really want to get in-depth and better at crafting things with it.

Where CSS and position attribute stands

Each web page element has dimensions according to the box model.

So if the element gets its shape and size mainly according to the box model, what does “position:” then determine?

The position: attribute places the whole element on screen. It tells the browser how you want the element to be placed.

Sometimes normal flow is ok. For example, writing text paragraps: it suffices they’ll be coming out one after another. That’s the expected norm.

But with menus and buttons and other controls you have different needs. The logic of CSS position: is explained below:

Web browsers render elements in 2 ways: flow, and out-of-flow.

Flow elements come out in a ordered queue: elements are being placed one after another. Inline elements go from left to right, and then they come back to left edge, but one row lower.

The ‘position’ attribute can take an element to special treatment and place it exceptionally to the document.

The position can have a value one of:

• position: relative;
• position: absolute;
• position: fixed;

.keepOnScreen { position: fixed; } 

The ‘display’ CSS attribute controls a lot. It determines how the final element position is calculated. In other words, display tells the browser what logic to use for that particular element, when interpreting the values of various other attributes, such as left: or top:

If one uses an element without explicitly given display: then it is equal to following:

display: fixed;

Easiest is the ‘fixed’ which really means what are the absolute coordinates, in pixels, of the element on browser’s viewport. Note that word viewport – this is crucial. Viewport extends basically from 0,0 to what ever is the resolution of the device minus space taken by web browser’s widgets.

display: relative;

Relative anchors the element to use (0,0) origin of its parent element as position, unless further guided by top, left, right or bottom. Thus it is relative to the other element. For example, nested DIVs makes the inner DIV relative to the outer div.

div { display: relative; }

display: absolute;

Absolute differs from fixed in that the pixels are counted from viewport’s origin (0,0) and the element can be placed indeed in a absolute position in the virtual canvas, which extends to infinities in both X and Y.

Absolute thus can make the element be outside the visible viewport. However absolute makes the element stay in its position, regardless of neighbors or scrolling of viewport.

I will next experiment more with using these positions and get back on writing more. Have fun with anything creative & CSS / web!