? CSS `position` Property

⚡ Quick Overview

The position property in CSS controls how elements are placed on a web page. It defines whether an element follows the normal document flow, moves relative to its original place, or sticks to the viewport while scrolling.

Mastering positioning is essential for building layouts, sticky headers, modals, tooltips, and more complex UI components.

? Key Concepts

static – default flow, no special positioning.
relative – moves relative to its normal position but still occupies its original space.
absolute – positioned relative to the nearest ancestor with a position value other than static.
fixed – sticks to the viewport and doesn’t move when scrolling.
sticky – behaves like relative until a scroll threshold is reached, then behaves like fixed.

? Basic Syntax

You apply position to any element using a CSS rule. Additional properties like top, right, bottom, and left adjust the final position.

? View Code Example

/* Basic CSS position syntax for any element */
selector {
position: value;      /* static | relative | absolute | fixed | sticky */
top: 10px;
left: 20px;
}

? Types of Positioning

There are five main values used with the position property: static, relative, absolute, fixed, and sticky.

1️⃣ Static Position (Default)

static is the default positioning for all elements. Elements appear in the normal document flow one after another, without any offset.

? View Code Example

/* Box follows the normal document flow */
.box-static {
position: static;
background-color: lightblue;
padding: 12px;
}

2️⃣ Relative Position

With relative, the element remains in the normal flow but can be moved relative to its original position using top, left, right, and bottom.

? View Code Example

/* Box is shifted from its original position but keeps its space */
.box-relative {
position: relative;
top: 20px;
left: 30px;
background-color: lightgreen;
padding: 12px;
}

3️⃣ Absolute Position

absolute removes the element from the normal document flow. It is positioned relative to the nearest ancestor that has a position value other than static. If none is found, it is positioned relative to the initial containing block (usually the viewport).

? View Code Example

/* Box is positioned relative to its closest positioned ancestor */
.box-absolute {
position: absolute;
top: 50px;
left: 50px;
background-color: lightcoral;
padding: 12px;
}

4️⃣ Fixed Position

fixed positions an element relative to the viewport. It stays in the same place even when the page is scrolled (great for sticky headers, toolbars, and floating buttons).

? View Code Example

/* Box stays fixed at the top center of the viewport */
.box-fixed {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background-color: lightgoldenrodyellow;
padding: 12px;
}

5️⃣ Sticky Position

sticky is a hybrid of relative and fixed. The element scrolls normally until it reaches a specified offset (e.g. top: 0), then it sticks to that position.

? View Code Example

/* Header sticks to the top after scrolling */
.header-sticky {
position: sticky;
top: 0;
background-color: lightpink;
padding: 12px;
}

? Positioning Context & Parent Elements

For absolute positioning, the browser looks for the nearest ancestor with position set to relative, absolute, fixed, or sticky. That ancestor becomes the reference point.

? View Code Example

/* Child is absolutely positioned inside its parent */
.parent {
position: relative;
width: 250px;
height: 150px;
background-color: #e5e7eb;
}

.child {
position: absolute;
top: 20px;
left: 30px;
background-color: #38bdf8;
padding: 8px;
}

? Explanation (Parent vs Child)

In the example above:

The .parent element creates a positioning context using position: relative.
The .child element uses position: absolute and is offset 20px from the top and 30px from the left of the parent box.
If you remove position: relative from .parent, the child would be positioned relative to the entire page instead.

?️ Real-World Layout Example

Here is a mini layout using different position values together: a fixed header, a sticky sidebar, and content using normal flow.

? View Code Example

/* Simple layout using fixed, sticky and static elements */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 12px;
background-color: #111827;
color: #f9fafb;
}

.sidebar {
position: sticky;
top: 60px;
width: 200px;
background-color: #e5e7eb;
padding: 12px;
}

.main-content {
margin-top: 70px;
margin-left: 220px;
padding: 16px;
}

?️ Live Output (Conceptual)

If you implemented the CSS above with matching HTML:

The header would stay fixed at the top while scrolling.
The sidebar would scroll normally until it hits top: 60px, then become sticky.
The main content appears to the right of the sidebar and scrolls as usual.

? Real-World Use Cases

Navigation Bars: Use position: fixed to create headers that remain visible while scrolling.
Pop-up Modals: Use position: absolute (inside a relatively positioned overlay) to center dialogs.
Floating Elements: Use position: fixed for floating action buttons or social media icons.
Sticky Sections: Use position: sticky for section headers or side navigation menus.

? Tips & Best Practices

Use position: relative on a container when you want to control where absolutely positioned children appear.
Do not overuse position: absolute for entire layouts; it can break responsiveness if not handled carefully.
Always test position: fixed on different screen sizes to ensure it doesn’t cover important content.
Remember that z-index works together with position to control stacking order.

? Try It Yourself

Create a centered modal using position: absolute inside a full-screen overlay with position: fixed.
Build a fixed header and footer using position: fixed and ensure the main content scrolls between them.
Experiment with a sticky sidebar using position: sticky and observe how it behaves while scrolling.
Create a card with a badge in the top-right corner using position: relative on the card and position: absolute on the badge.