Display & Position

block, inline, inline-block, none; static, relative, absolute, fixed, sticky.

Video tutorialTrack course · freeCodeCamp

CSS Full Course — Zero to Hero

Speed

0.75x1x1.25x1.5x2x

Skip intro Next lesson

Watch 00:00 · 1 checkpoints Watch on YouTube More on this topic

Transcript & captions .txt

7/7

1. 00:00Display & Position. block, inline, inline-block, none; static, relative, absolute, fixed, sticky.
2. 00:05static — the default, ignores top/left.
3. 00:10relative — offset from its normal place; creates a positioning context.
4. 00:15absolute — positioned against the nearest positioned ancestor.
5. 00:20fixed — positioned against the viewport, stays on scroll.
6. 00:25sticky — behaves like relative until it hits a scroll threshold.
7. 00:30Try it yourself — edit the sample and run it in the browser.

• static — the default, ignores top/left.
• relative — offset from its normal place; creates a positioning context.
• absolute — positioned against the nearest positioned ancestor.
• fixed — positioned against the viewport, stays on scroll.
• sticky — behaves like relative until it hits a scroll threshold.