Position

CSS Position Summary

CSS position lets you place an element in a specific spot, such as a badge in the corner of a card or a header that stays at the top while you scroll.

Most elements should stay in the page’s normal layout. The position property is useful when one element needs to move, overlap another element, or stay attached to part of the screen.

Static Keeps The Normal Layout

position: static is the default. The browser places the element in its normal spot alongside the other content.

Properties such as top, right, bottom, and left do not move a static element.

Relative Nudges An Element

position: relative lets you move an element slightly away from its original spot.

.label {
	position: relative;
	top: 4px;
}

The label moves down by 4px, but the browser still keeps its original space in the page layout.

Place An Element Inside A Container

position: absolute is useful when an element needs to sit in a specific place inside another element. A common example is placing a badge in the corner of a card.

<div class="card">
	<span class="badge">New</span>
	<h3>HTML Lessons</h3>
</div>

.card {
	position: relative;
	padding: 24px;
	border: 2px solid #c9d0dd;
}

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

The card has position: relative, which makes the card the reference point for the badge. The badge is then placed 12px from the card’s top and right edges.

An absolutely positioned element no longer takes up its normal space in the page layout, so other content may move underneath it.

Fixed Stays In The Browser Window

position: fixed keeps an element in the same place in the browser window, even while the page scrolls.

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

This could keep a help button visible in the bottom-right corner of the screen.

Sticky Scrolls And Then Stays Put

position: sticky lets an element scroll with the page until it reaches a chosen position. It then stays there while the rest of its parent area continues scrolling.

.site-header {
	position: sticky;
	top: 0;
}

The header scrolls normally until it reaches the top of the page. The top: 0 rule tells it where to begin sticking.

Offsets Set The Distance From An Edge

The top, right, bottom, and left properties tell a positioned element how far it should be from an edge.

For example, right: 12px places the element 12px away from the right edge of its reference area.

Use Positioning For Special Cases

Use normal page layout, Flexbox, or Grid for most sections of a website. Use positioning for smaller jobs such as badges, overlays, sticky headers, and buttons attached to the browser window.

Positioned elements can overlap other content, so test the page at different screen sizes after using them.