Positioning

Positioning is a CSS feature that allows the manipulation of positions of HTML elements in the webpage. For example, elements are often stacked on top of each other in ascending order in the webpage. If the developer wants a certain element to behave differently then positioning is what is used to achieve this.

Positioning allows the developer to achieve complex layouts, floating elements, or elements that are fixed or sticky to a part of the webpage.

The 5 Types of Positions

Static

Static is the default position every HTML element has. This means every element rendered by the browser follows the normal flow in the webpage which is from top to bottom in ascending order.

Relative

When the position of an element is set to relative, it stays in the normal flow in the webpage but can be adjusted to move to the top, bottom, left, or right using the top, bottom, left, and right properties. Importantly, moving a relatively positioned element does not affect the layout of surrounding elements — the space it originally occupied is preserved.

Absolute

When the position of an element is set to absolute it is removed from the normal flow of the document, and positioned relative to the nearest parent element with a position other than static. This means if the immediate parent element has a position of static, the browser looks further up the DOM tree for another parent element with a position other than static.

Fixed

When the position of an element is set to fixed, it is removed from the normal document flow and positioned relative to the browser viewport. Such elements are often locked to a certain position in the webpage like a navigation bar fixed to the top of the screen and stays in the same place even when the page is being scrolled.

Sticky

The sticky position is a combination of the relative and fixed position. Like a relative position the element stays in the normal document flow, and like the fixed position, when the user scrolls the page it sticks to the position set for it to be fixed either top, bottom, left, or right.

Z-Index

Positions allow HTML elements to overlap, and when this happens the Z-index is used to determine which element stays on top of the other. This is decided by setting the z-index, and the element with the higher z-index sits on top of other elements with a lower z-index.

Example: z-index: 10 sits on top of z-index: 1.

An important constraint to note is that z-index only works on positioned elements — that is, elements with a position value of relative, absolute, fixed, or sticky. Setting a z-index on a statically positioned element will have no effect. This is one of the most common sources of confusion when working with z-index, so it is worth keeping in mind.