Lesson 3.6: CSS Positioning (Relative, Absolute, Fixed, Sticky)

Web Development with HTML, CSS, JavaScript

Lesson 3.6: CSS Positioning (Relative, Absolute, Fixed, Sticky)

Positioning in CSS allows you to control where an element appears on a webpage. By default, HTML elements appear in the normal document flow (one after another), but with CSS positioning, you can place them exactly where you want.

1. Types of Positioning in CSS

(a) Static (Default)

Every element is position: static; by default.
Elements appear in normal flow (from top to bottom).
No special positioning.

(b) Relative

The element is positioned relative to its normal position.
You can move it using top, bottom, left, right.

📝 Even after moving, the element still takes up its original space.

(c) Absolute

The element is positioned relative to its nearest positioned ancestor (an element with position: relative, absolute, or fixed).
If no ancestor is positioned, it is placed relative to the <html> (browser window).

📌 Useful for tooltips, buttons inside containers, etc.

(d) Fixed

Positioned relative to the browser window, not the page.
Does not move when you scroll.

📌 Example: Sticky navigation bars.

(e) Sticky

A mix of relative and fixed.
It acts as relative until you scroll to a certain point, then it sticks like fixed.

📌 Example: Table headers that remain visible while scrolling.

2. Comparison Table

Position	Moves relative to	Stays in normal flow?	Sticks while scrolling?
Static	Normal flow	✅ Yes	❌ No
Relative	Own position	✅ Yes	❌ No
Absolute	Nearest ancestor	❌ No	❌ No
Fixed	Browser window	❌ No	✅ Yes
Sticky	Own position / Scroll	✅ Yes until scroll	✅ Yes after scroll

3. Example Demo

<!DOCTYPE html>

<html>

<head>

  <style>

    .relative {

      position: relative;

      left: 50px;

      background: lightblue;

    }

    .absolute {

      position: absolute;

      top: 50px;

      left: 100px;

      background: pink;

    }

    .fixed {

      position: fixed;

      bottom: 0;

      right: 0;

      background: lightgreen;

    }

    .sticky {

      position: sticky;

      top: 0;

      background: yellow;

    }

  </style>

</head>

<body>

  <h2 class="sticky">Sticky Header</h2>

  <p class="relative">This is relative.</p>

  <p class="absolute">This is absolute.</p>

  <p class="fixed">This is fixed (bottom-right corner).</p>

  <p style="margin-top:1000px;">Scroll down to see sticky and fixed effect.</p>

</body>

</html>

✅ With this, you now know how to control the placement of elements on your webpage using positioning.