Position

CSS Position Summary

CSS position controls how an element is placed on the page. Most elements use normal page flow, but position can move an element in special ways.

.box {
	position: relative;
	top: 20px;
	left: 20px;
}

By default, elements appear in normal page flow. This means block elements usually stack from top to bottom in the order they appear in the HTML.

Most layout work should start with normal page flow, flex, or grid. Position is best used when something needs to be placed in a more specific way.

Static is the default position. It means the element stays in the normal flow of the page.

.box {
	position: static;
}

Relative position lets you move an element from where it would normally be. The space where it started still remains.

.box {
	position: relative;
	top: 20px;
	left: 20px;
}

This moves the box down 20 pixels and right 20 pixels from its normal position.

Absolute position removes an element from normal page flow. It can then be placed using top, right, bottom, or left.

.badge {
	position: absolute;
	top: 10px;
	right: 10px;
}

Absolute elements are often placed inside a parent element that has position: relative;.

.card {
	position: relative;
}
.badge {
	position: absolute;
	top: 10px;
	right: 10px;
}

Fixed position keeps an element in the same place on the screen, even when the page scrolls.

.button {
	position: fixed;
	bottom: 20px;
	right: 20px;
}

Fixed position is often used for sticky buttons, chat buttons, and small navigation elements.

When positioned elements overlap, z-index can control which one appears on top.

.box {
	position: relative;
	z-index: 2;
}