Display, Positioning, Normal Flow, Inline, Block, and Visibility Control
Understand how elements participate in layout flow and how display and positioning choices affect page structure and behavior.
Inside this chapter
- Normal Document Flow
- display Property
- Positioning Modes
- Absolute vs Relative Thinking
- Visibility vs display none
- Practical Example
Series navigation
Study the chapters in order for the clearest path from CSS basics and styling foundations to advanced layout, responsive design, architecture, and maintainable interface systems. Use the navigation at the bottom to move smoothly through the full tutorial series.
Normal Document Flow
By default, browsers place elements according to normal flow rules. Block elements usually stack vertically, while inline elements flow within text lines. Many CSS layout questions become much easier once this starting model is understood.
display Property
.badge {
display: inline-block;
}Common display values include block, inline, inline-block, none, flex, and grid. Each changes layout participation in important ways.
Positioning Modes
staticrelativeabsolutefixedsticky
Absolute vs Relative Thinking
Absolute positioning can be useful for overlays, badges, or floating controls, but overusing it often creates fragile layouts. Students should first understand flow-based layout before relying heavily on positioning tricks.
Visibility vs display none
Hiding an element with display: none removes it from layout flow. Other visibility techniques may keep space reserved. This difference matters in UI behavior and animation strategy.
Practical Example
A notification badge on a profile icon may need relative positioning on the icon container and absolute positioning on the badge itself. Knowing the layout context is what makes this predictable.