✅ Module 5: Layout Techniques in CSS (🧭📐)

📐 Module 5: Layout Techniques in CSS

Creating structured, responsive layouts is one of the main goals of CSS. This module introduces various layout techniques — from traditional to modern — and shows how to build visually appealing and flexible page designs. 🏗️

🖼️ Display Property

• block: Takes full width and starts on a new line.
• inline: Takes only the width it needs. No line break.
• inline-block: Like inline but allows width and height.
• none: Hides the element completely.
• flex / grid: Used for advanced layouts (covered in later modules).

🧍 Position Property

• static: Default flow position.
• relative: Offset from its normal position.
• absolute: Positioned relative to the nearest positioned ancestor.
• fixed: Stays in the same position relative to the viewport.
• sticky: Scrolls with content but sticks once a threshold is passed.

🌀 Float and Clear

Floats allow elements to wrap around each other, like in newspapers. However, they often break layouts without clear fixes.

img {
  float: left;
  margin-right: 10px;
}
.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
  

📐 Z-index

Controls the stacking order of overlapping elements. Higher values appear on top.

.modal {
  position: absolute;
  z-index: 999;
}
  

✅ Summary

• Understand display for element rendering behavior.
• Use position for precise placement.
• float is useful but outdated for layouts — use flex or grid instead.
• z-index is helpful for overlays and popups. 🧩