CSS Position

Static is the default value of the element's position property — it means that the browser will position the element according to the normal flow of the page. Such elements will be considered non-positioned, and they aren't affected by the top, bottom, left, right, and z-index properties. Elements with position value other than static are considered positioned elements.

In the example, the yellow inline element with position: static; stays in line with other inline elements.

Changing the position property to relative allows us to set where the element is on the page relatively to its default position in the flow of the page. The top, bottom, left, and right properties allow us to set the indentation, also called the offset, usually in units of length like px. You can use two properties like left and top to move the element diagonally.

In the example, setting the left and bottom offsets moves the image in the opposite direction — towards the top-right corner. The space where the element should have been if non-positioned stays unoccupied.

Setting the element's position to absolute takes it out of the flow of the page, and other elements act as if this element doesn't exist. Then we can define this element's position relative to its closest positioned parent using the top, bottom, left, and right properties. If all parent elements are non-positioned, the browser calculates the offset from the edge of the page. Absolutely positioned elements are placed on top of non-positioned elements and may overlap with other positioned elements.

In the example, the yellow element is 40px below the top edge and 40px to the right from the left edge of the page.

An element with a fixed value for the position property, similar to one in an absolute position, is removed from the page's flow, and the browser will display it on top of un-positioned elements. The difference is that the offset of an element with position: fixed; is calculated from the browser window, also called the viewport. In practice, this means that a fixed element doesn't move when you scroll the page.

In the example, the yellow element with position: fixed; is stuck on top of the page, and will stay there when you scroll.

The sticky value of the position property is a new addition to CSS, and it's something of a mix between relative and fixed positions. An element behaves as though its position is relative until it crosses a specified threshold — and then it stays in the same place of the viewport, as though its position is fixed.

For example, the yellow element with a sticky position has top: 0;. This means that this element will stay in line with other inline elements until users scroll down. When the element reaches the top of the page, it will stay there, overlaying other non-positioned elements.

You can use the z-index property together with the position property to create layers like in Photoshop. Normally, HTML elements are considered 2D, having only width and height. The z-index property introduces the new dimension — depth, and its value specifies the stack level of the box. Browsers display elements with higher values on top of elements with lower values.

In the example, the yellow element's z-index value is 1, and the header's z-index value is unspecified, which defaults to 0. As 1 is higher than 0, the yellow element overlays the header.

Setting position to absolute takes the element out of the grid, which sometimes makes for more unique and appealing designs. This allows us to overlay elements — for example, adding badges on top of images.

In the example above, the pink element is placed 30px below the page's top edge.

Adding a declaration position: relative; to an element makes it a positioned element. The most common use case for this value is for parent elements that contain other elements with position: absolute;.

In this example, the pink element is the child of the green element, and it's positioned 100px below the top edge of its parent. If we remove the declaration position: relative; from the rule for .green, its positioning sets to default — position: static;, and the pink element will move up to be 100px away from the page's top edge, not the green element's edge.

When you set the element's position to fixed, it always stays in the same place in the browser window and doesn't move. By default, such an element sticks to the top-left corner of the page, but you can change its position with the top, bottom, left, and right properties. Common use cases of position: fixed; include headers that stick to the top of the window or chatbots in the bottom-right corner.

The z-index property sets the order in which positioned elements overlap, allowing us to create more complex webpage layouts. Elements with higher values overlay those with lower values.

When assigning z-index values, give yourself some wiggle room. Using values that closely follow one another like 1, 2, and 3 means that if you want to add another element to the layout, you'd need to change all elements' z-indexes. Values like 1, 10, and 15 would be a better choice. This property also takes negative values — which means that the element will be positioned below the local stacking context, like in the example.