CSS Positioning - Complete Guide

Fixed Position
I stay in the same place even when you scroll!

1. Static Positioning (Default)

What is Static Positioning?

Static is the default positioning for all HTML elements. Elements with static positioning follow the normal document flow and cannot be moved using top, right, bottom, or left properties.

.static-element { position: static; /* This is the default */ /* top, right, bottom, left have NO effect */ }

Live Example:

Static Box 1 - I follow normal document flow
Static Box 2 - I also follow normal document flow
Static Box 3 - We stack vertically as expected

2. Relative Positioning

What is Relative Positioning?

Relative positioning moves an element relative to its original position in the document flow. The element still takes up space in the original location, but appears moved.

.relative-element { position: relative; top: 20px; /* Move 20px down from original position */ left: 30px; /* Move 30px right from original position */ }

Live Example:

Original Position - This box shows where the relative box would normally be
Relative Box - I'm moved 20px down and 30px right from my original position!
Next Element - I'm positioned as if the relative box was still in its original place

3. Absolute Positioning

What is Absolute Positioning?

Absolute positioning removes an element from the normal document flow and positions it relative to its nearest positioned ancestor (or the viewport if none exists).

.absolute-container { position: relative; /* Creates positioning context */ } .absolute-element { position: absolute; top: 20px; right: 20px; /* Positioned relative to .absolute-container */ }

Live Example:

Container with position: relative

This container creates a positioning context for the absolutely positioned element.

Absolute Box
I'm positioned relative to my container, not the document!

4. Fixed Positioning

What is Fixed Positioning?

Fixed positioning removes an element from the document flow and positions it relative to the viewport. The element stays in the same position even when scrolling.

.fixed-element { position: fixed; top: 20px; right: 20px; /* Always stays 20px from top and right of viewport */ }

Live Example:

Look at the top-right corner of your screen! The "Fixed Position" box stays there even when you scroll.

Fixed elements are commonly used for:

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

5. Sticky Positioning

What is Sticky Positioning?

Sticky positioning is a hybrid of relative and fixed positioning. The element is positioned relative until it crosses a specified threshold, then it becomes fixed.

.sticky-element { position: sticky; top: 20px; /* Sticks to 20px from top when scrolling */ }

Live Example:

Sticky Box - I'll stick to the top when you scroll past me!

Scroll down to see the sticky behavior in action. This sticky box will stick to the top of the viewport when you scroll past it.

Sticky positioning is perfect for:

  • Table headers
  • Navigation menus
  • Sidebar content
  • Important announcements

6. Z-Index - Layering Elements

What is Z-Index?

Z-index controls the stacking order of positioned elements. Higher z-index values appear on top of lower values.

.layer-1 { z-index: 1; } /* Bottom layer */ .layer-2 { z-index: 2; } /* Middle layer */ .layer-3 { z-index: 3; } /* Top layer */

Live Example:

Layer 1
z-index: 1
Layer 2
z-index: 2
Layer 3
z-index: 3

Note: Z-index only works on positioned elements (relative, absolute, fixed, sticky).

7. Real-World Examples

Card with Badge

NEW

Product Card

This card uses absolute positioning for the "NEW" badge.

SALE

Another Card

Notice how the badge stays in the top-right corner.

Modal Dialog

Scroll to see sticky behavior!

Notice how the navigation bar stays at the top

More content to scroll through

The floating button stays in the bottom-right corner

End of demonstration

You've seen all CSS positioning types in action!