block 3 (class 7-11): cheat sheet

Positioning of elements with 'position'

Elements can have five different kinds of positioning in relation to the body or parent element. It is important to learn them, it will save you a lot of time being puzzled why your intented styling is not the way you expected it to be.

position: static;

This is the default mode. The element will be "listed" with all other elements and will not be affected by the top, bottom, left, and right css properties.

position: relative;

The elements will still be in a "list" with the other ones, but top, bottom, left, and right css properties are applied.

position: absolute;

The element will be taken out of the "list". Top, right, bottom, and left properties become important! This also means that the element can be on top or underneath other elements on the page. These levels of overlap can be managed with the z-index property.

position: fixed;

This is the same as absolute, but now the top, right, bottom, and left properties are in relation to the computer screen!

position: sticky;

This is the same as static or relative, but now the element will always stay inside the parent container that allows for scrolling. The top, right, bottom, and left properties define the position in relation to that scrolling container.

This website shows the big difference between static/absolute and fixed and the effect it has on the stacking of elements (z-index).

If you want to have control over the placement of multiple elements in relation to each other, you can look into the CSS display property, which are always used together with position. The default value is block.