CSS Positioning Tutorial by KHDEVTT

Learn CSS positioning with interactive examples

Lesson 1: Static Position (Default)

What is Static Position?

Static is the default position for all HTML elements. Elements with static positioning follow the normal document flow, stacking vertically like paragraphs in a document.

Static Box 1
Static Box 2
Static Box 3
/* Static position (default) */ .static-box { position: static; /* Default value */ /* top, right, bottom, left have NO effect */ background-color: #95a5a6; padding: 15px; margin: 10px; }

⚠️ Important:

The properties top, right, bottom, and left have NO effect on static elements.

✅ Key Points:

  • Static is the default position for all elements
  • Elements follow normal document flow
  • Positioning properties (top, right, bottom, left) are ignored
  • Elements stack naturally based on HTML order

Lesson 2: Relative Position

What is Relative Position?

Relative positioning keeps the element in the normal document flow BUT allows you to offset it from its original position using top, right, bottom, left properties.

Interactive Demo: Move the Relative Box

px
px
Static Box (Normal Flow)
Relative Box (Can be offset)
Static Box (Notice the gap above)
/* Relative position */ .relative-box { position: relative; top: 0px; /* Offset from original position */ left: 0px; background-color: #e74c3c; }

✅ Key Points:

  • Element stays in document flow (space is reserved)
  • Can be offset using top, right, bottom, left
  • Other elements behave as if it's still in original position
  • Creates a positioning context for absolute children

Lesson 3: Absolute Position

What is Absolute Position?

Absolute positioning removes the element from the normal document flow and positions it relative to its nearest positioned ancestor (any element with position other than static).

Interactive Demo: Move the Absolute Box

px
px
Positioned Container (position: relative)

Parent Container - I have position: relative

Absolute Child

Notice: Absolute element doesn't affect the layout of other elements.

/* Absolute position */ .parent { position: relative; /* Creates positioning context */ } .absolute-box { position: absolute; top: 20px; /* Distance from parent's top */ right: 20px; /* Distance from parent's right */ background-color: #f39c12; }

⚠️ Critical Rule:

If no positioned ancestor exists, the absolute element will position relative to the viewport (entire browser window), not its immediate parent!

✅ Key Points:

  • Element is removed from document flow
  • Positions relative to nearest positioned ancestor
  • If no positioned ancestor, positions relative to viewport
  • Other elements behave as if absolute element doesn't exist

Lesson 4: Fixed Position

What is Fixed Position?

Fixed positioning removes the element from document flow and positions it relative to the viewport (browser window). It stays in the same position even when scrolling.

Interactive Demo: Create a Fixed Element

px
px

Scroll this area to see fixed positioning in action!

The fixed element (if visible) will stay in the same position relative to the viewport.

More content to scroll through...

Notice how the fixed element doesn't move with the scroll.

Final section

The fixed element maintains its position throughout the scroll.

/* Fixed position */ .fixed-box { position: fixed; top: 20px; /* Distance from viewport top */ right: 20px; /* Distance from viewport right */ background-color: #9b59b6; z-index: 1000; /* Stay above other content */ }

✅ Key Points:

  • Element is removed from document flow
  • Always positions relative to viewport (browser window)
  • Stays in same position when scrolling
  • Perfect for navigation bars, floating buttons, modals

Lesson 5: Sticky Position

What is Sticky Position?

Sticky positioning is a hybrid of relative and fixed. The element behaves like relative until it reaches a specified threshold, then it behaves like fixed within its containing block.

Interactive Demo: Sticky Header

px

Section 1

Scroll down to see the sticky header in action. The header will stick to the top when you scroll past it.

Section 2

The sticky header above will remain visible as you scroll through this content.

Section 3

Sticky positioning is perfect for section headers and table headers.

Section 4

When you reach the bottom of the container, the sticky element will stop sticking.

/* Sticky position */ .sticky-header { position: sticky; top: 0px; /* Threshold - REQUIRED! */ background-color: #3498db; z-index: 10; /* Stay above content */ }

⚠️ Important:

Sticky positioning requires a threshold value (top, bottom, left, or right). Without it, the element won't stick!

✅ Key Points:

  • Starts in normal document flow
  • Sticks when threshold is reached
  • Only sticks within its containing block
  • Perfect for headers, navigation, table headers

Lesson 6: The Relative-Absolute Partnership

The Most Important CSS Positioning Concept

The relative-absolute partnership is the foundation of precise CSS positioning. A parent with position: relative creates a positioning context for children with position: absolute.

Interactive Demo: Relative Parent, Absolute Children

Parent: relative
Parent Container

I am the parent container

Top-Right
Bottom-Left
Centered
/* The Partnership */ .parent { position: relative; /* Creates positioning context */ /* No offset needed - just creates context */ } .child { position: absolute; top: 10px; /* Relative to parent, not viewport */ right: 10px; } /* Perfect centering */ .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

✅ Pattern Benefits:

  • Predictable positioning: Children position relative to parent, not viewport
  • Component-based design: Self-contained positioning within components
  • Responsive friendly: Children move with parent container
  • Easy maintenance: Changes to parent affect all children consistently

⚠️ Without the Partnership:

If the parent doesn't have position: relative, absolute children will position relative to the viewport, often breaking your layout!

Lesson 7: Fixed vs Sticky - When to Use Each

Understanding the Difference

Both fixed and sticky can keep elements visible while scrolling, but they work very differently and solve different problems.

Aspect Fixed Sticky
Initial Position Immediately removed from flow Starts in normal flow
Reference Point Always viewport Scrolling container
Scrolling Behavior Never moves Sticks at threshold
Container Boundaries Ignores all containers Respects containing block
Best For Navigation bars, modals, floating buttons Section headers, table headers, sidebars

Interactive Comparison

Scroll Area for Comparison

Use the buttons above to see fixed vs sticky positioning in action.

Section 2

Notice how fixed elements ignore container boundaries while sticky elements respect them.

Section 3

Fixed elements stay in the exact same position. Sticky elements travel with their container.

Section 4

This demonstrates the key differences between fixed and sticky positioning.

✅ When to Choose Fixed:

  • Navigation bars that should always be accessible
  • Floating action buttons
  • Modal overlays
  • Chat widgets
  • Back-to-top buttons

✅ When to Choose Sticky:

  • Section headers in long articles
  • Table headers in data tables
  • In-page navigation menus
  • Sidebars that should stick while scrolling content
  • Any element that should stick within its container

Lesson 8: Z-Index and Stacking Order

What is Z-Index?

Z-index controls the stacking order of positioned elements along the z-axis (think of layers stacked on top of each other). Higher z-index values appear above lower ones.

Interactive Demo: Control Z-Index

Red
z-index: 1
Blue
z-index: 2
Green
z-index: 3
/* Z-index controls stacking order */ .red-layer { position: absolute; /* Required for z-index */ z-index: 1; } .blue-layer { position: absolute; z-index: 2; /* Higher = on top */ } .green-layer { position: absolute; z-index: 3; /* Highest = topmost */ }

⚠️ Critical Z-Index Rules:

  • Only works on positioned elements: element must have position other than static
  • Stacking contexts: z-index only compares within the same stacking context
  • Integer values only: accepts positive, negative, or zero integers
  • Default is auto: treated as 0 for comparison purposes

✅ Z-Index Best Practices:

  • Use systematic values: 10, 20, 30 instead of 1, 2, 3 (easier to insert new layers)
  • Create a scale: backgrounds: 0, content: 100, overlays: 200, modals: 1000
  • Avoid extremely high values: z-index: 999999 usually indicates a problem
  • Document your scale: comment why each z-index value was chosen

Recommended Z-Index Scale:

/* Systematic z-index scale */ :root { --z-background: 0; --z-content: 100; --z-overlay: 200; --z-dropdown: 300; --z-modal: 1000; --z-tooltip: 2000; --z-notification: 3000; }