CSS Positioning

CSS positioning is a powerful layout tool that lets you precisely control element placement on the page.

Position Property Quick Reference

position: relative

Offsets element from its normal position, without removing it from document flow:

Example

<style>
.box {
  position: relative;
  top: 20px;    /* Move down 20px */
  left: 30px;   /* Move right 30px */
  background: #e3f2fd;
  padding: 10px;
}
</style>
<div class="box">Relatively positioned (offset from original position)</div>
<p>This paragraph stays in normal flow — the box still occupies its original space.</p>

Common uses:

• Fine-tuning element position
• Creating positioning context for absolute children

position: absolute

Removes element from flow, positioned relative to nearest positioned ancestor:

Example

<style>
.parent {
  position: relative;
  width: 300px;
  height: 200px;
  background: #f5f5f5;
  border: 2px solid #333;
}
.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #e74c3c;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}
</style>
<div class="parent">
  <div class="badge">HOT</div>
  <p>Product card content</p>
</div>

Key point: If no positioned ancestor exists, absolute positions relative to the viewport.

position: fixed

Fixed in viewport, doesn't scroll with page:

Example

<style>
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #2c3e50;
  color: white;
  padding: 10px 20px;
  z-index: 1000;
}
</style>
<div class="fixed-header">Fixed header — always visible at top</div>

Common uses:

• Navigation bars
• Back-to-top buttons
• Chat widgets

position: sticky

Hybrid of relative and fixed — scrolls normally then "sticks" at a threshold:

Example

<style>
.sticky-nav {
  position: sticky;
  top: 0;
  background: #2c3e50;
  color: white;
  padding: 10px;
  z-index: 100;
}
</style>
<div class="sticky-nav">Sticky nav — scrolls with content, then sticks at top</div>

Usage notes:

• Requires top, bottom, left, or right value to work
• Parent element cannot have overflow: hidden or overflow: auto
• Parent height must be greater than sticky element height

z-index (Stacking Order)

When elements overlap, z-index controls which appears on top:

Example

<style>
.box1 {
  position: absolute;
  z-index: 10;
  background: #e74c3c;
  width: 100px;
  height: 100px;
}
.box2 {
  position: absolute;
  z-index: 5;
  background: #3498db;
  width: 100px;
  height: 100px;
  left: 30px;
  top: 30px;
}
</style>
<div class="box1">z-index: 10 (on top)</div>
<div class="box2">z-index: 5 (behind)</div>

Note: z-index only works on positioned elements (non-static).

Stacking Context

z-index is compared within the same "stacking context." Each positioned element creates a stacking context — children's z-index only compares within the parent's context.

❓ FAQ

📖 Summary

• CSS positioning is a powerful layout tool
• relative is for fine-tuning and positioning context
• absolute precisely positions children within parents
• fixed is for viewport-fixed elements (navigation, back-to-top)
• sticky is for "stick at position" scenarios
• Master positioning with z-index stacking to handle any layout need

📝 Exercises

1. Create a "product card" with a "HOT" badge in the top-right corner using position: absolute.
2. Create a fixed bottom navigation bar or copyright notice using position: fixed.
3. Create a "sticky heading" — section titles that stick to the top when scrolling until the next title pushes it away.
4. Implement absolute centering of a child element (using absolute + top/left + transform).