Understand Before You Build

  • HTML
    • Form
    • HTML pattern Attribute
  • CSS
    • inset
    • scroll-snap-type
    • margin-inline
    • Content-visibility
    • Scroll-Driven Animations
    • Isolation
    • @Container
    • @layer
    • :not()
    • :is()
    • :Where()
    • :has()
    • :target
    • backdrop-filter
    • :root
    • Color-scheme
    • Animations
    • Selectors
    • Object-fit
    • Logical Pseudo-Classes
    • :scope
    • Properties
    • Performance
    • Aspect-ratio
    • State Pseudo-Classes
    • Positioning
    • Resize
    • Structural Pseudo-Classes
    • Responsive Design
    • Units
    • Root & Scope Selectors
    • Scrolling
    • At-Rules
    • Target & URL Selectors
    • Spacing
    • Functions
    • Attribute Selectors
    • Layouts
    • Basic Selectors
    • Filters & Effects
    • Colors & Typography
    • Flexbox
    • Combinator Selectors
    • Grid
    • Form & UI State Selectors
    • AI CSS Generator
  • Sass
    • Variables
    • Nesting
    • Mixins
    • Reusable styles
    • Large project management
  • CSS Frameworks
    • Material UI
    • Bootstrap
    • Tailwind CSS
  • React UI
    • Performance Optimization
    • React.memo
    • useMemo
    • useCallback
    • Lazy Loading
    • Code Splitting
    • Virtual DOM Optimization
    • Preventing Re-renders
    • Props & State
    • Hooks
    • Component-based architecture
    • State-driven UI updates
  • Figma
    • Design systems
    • Tokens
    • Variables
    • Auto layout
    • Component variants
    • Design handoff
    • UI consistency

Positioning

CSS Positioning is used to control where an element appears on a webpage.

It helps developers place elements exactly where they want.

Positioning is commonly used for:

  • Navigation bars
  • Sticky headers
  • Floating buttons
  • Popups and modals
  • Tooltips
  • Landing page layouts

CSS Position Types

CSS provides five main positioning types:

  • static
  • relative
  • absolute
  • fixed
  • sticky

1. position: static

static is the default position value in CSS.

Elements appear in normal document flow.

[code theme="dark"] .box{ position:static; } [/code]

Important Points

  • Default positioning mode
  • top, left, right, bottom do not work
  • Element follows normal layout flow

[grid] Default Layout Flow Basic Page Structure Normal Element Position Simple Content Layout [/grid]

2. position: relative

relative moves an element relative to its original position.

[code theme="dark"] .box{ position:relative; top:20px; left:30px; } [/code]

Important Points

  • Element still keeps its original space
  • Can move using top, left, right, bottom
  • Often used as parent for absolute elements

[grid] Card Offset Layout Relative Movement Example UI Element Positioning Parent Positioning Setup [/grid]

3. position: absolute

absolute removes the element from normal document flow.

The element positions itself relative to the nearest positioned parent.

[code theme="dark"] .parent{ position:relative; } .child{ position:absolute; top:20px; right:20px; } [/code]

Important Points

  • Removed from normal layout flow
  • Moves relative to nearest positioned parent
  • Frequently used for badges, icons, overlays

[grid] Notification Badge Card Overlay Design Floating Icon Layout Image Text Overlay [/grid]

4. position: fixed

fixed keeps the element fixed on the screen even while scrolling.

[code theme="dark"] .box{ position:fixed; bottom:20px; right:20px; } [/code]

Important Points

  • Element stays fixed on viewport
  • Does not move during scrolling
  • Useful for floating buttons and sticky menus

[grid] WhatsApp Floating Button Fixed Navigation Bar Support Chat Button Back To Top Button [/grid]

5. position: sticky

sticky behaves like relative until a scroll position is reached.

After that, it sticks to the viewport.

[code theme="dark"] .header{ position:sticky; top:0; } [/code]

Important Points

  • Works during scrolling
  • Acts like relative initially
  • Becomes fixed after reaching offset
  • Popular for sticky headers

[grid] Sticky Navigation Bar Sticky Sidebar Table Header Stickiness Modern Landing Page Header [/grid]

top, right, bottom, left

These properties control element position.

[code theme="dark"] .box{ top:20px; left:30px; } [/code]
Property Direction
top Moves from top
right Moves from right
bottom Moves from bottom
left Moves from left

Difference Between Relative and Absolute

Feature Relative Absolute
Keeps Original Space Yes No
Removed From Flow No Yes
Uses Parent Position No Yes

Best Real-World Use Cases

  • relative → Parent containers
  • absolute → Icons, badges, overlays
  • fixed → Floating buttons
  • sticky → Sticky navigation bars

Final Understanding

[code theme="dark"] static → Normal layout relative → Move from original position absolute → Position inside parent fixed → Fixed on screen sticky → Sticky during scroll [/code]