← CSS Styling
Layout systems · 15 MIN

Display and positioning

Display and positioning

Block and inline formatting determine how elements flow. Relative positioning offsets an element from its normal position; absolute positioning uses a containing block; fixed and sticky positioning relate to the viewport or scroll container. Use positioning for overlays and anchored elements, not every layout.

Try it yourself

Change the example, run it, and explain the result in your own words. Then create one variation of your own.

Key idea

Use the example as a starting point, not something to memorize. Practise, inspect the result and make small improvements.

Code example

header { position: sticky; top: 0; z-index: 10; }
.badge { position: absolute; top: .5rem; right: .5rem; }