Display and positioning decide how elements appear and where they stay on a webpage.
Instead of learning this only in theory, we will use real CSS code to understand how layout actually works.
Here both boxes follow the normal page flow.
By default, elements appear one after another from top to bottom.
This is called the normal document flow.
When you change display to inline, elements no longer start on a new line.
This simple change already affects the layout of the page.
Positioning lets you move elements from their normal place.
This is useful when building layouts like headers, sidebars, and floating buttons.
Real world use
Every website uses display and positioning to:
- Arrange content
- Create layouts
- Control spacing
- Build professional interfaces
Practice task
Create three boxes and:
- Change one to display inline
- Move one using position relative
- Keep one in normal flow
See how each one behaves differently.
Next lesson
In the next page, you will learn about block and inline elements in detail.