Position in CSS - Control Element Placement with Precision

The position property is one of the most powerful tools for placing elements in CSS. It lets you move elements precisely, pin them to the screen, or make them stick while scrolling.

If you are looking for position in CSS, the difference between relative and absolute, or when to use fixed and sticky, this lesson explains it clearly.

What Is position in CSS?

The position property defines how an element is placed on the page. The main values are:

• static (default)
• relative
• absolute
• fixed
• sticky

Simple definition: position in CSS controls how and where an element appears relative to itself, its parent, or the viewport.

1) static in CSS

This is the default. The element follows the normal page flow, and top/left have no effect.

.box {
    position: static;
    top: 20px; /* no visible effect */
}

2) relative in CSS

The element stays in its normal place, but you can shift it relative to that position.

.box {
    position: relative;
    top: 10px;
    left: 20px;
}

What does this code do? Moves the element 10px down and 20px right from its normal spot.

Expected result: the element moves visually, but its original space stays reserved.

Common mistake: expecting other elements to fill the original space (they usually do not).

3) absolute in CSS

The element is removed from the normal flow and positioned relative to the nearest positioned parent (relative, absolute, fixed, or sticky).

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 10px;
    right: 10px;
}

What does this code do? Pins the child to the top-right corner of the parent.

Expected result: precise placement inside the container.

Common mistake: forgetting position: relative on the parent, so the child positions relative to the page.

4) fixed in CSS

The element is positioned relative to the viewport and stays fixed while you scroll.

.help-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

What does this code do? Keeps a help button pinned to the bottom-right of the screen.

Expected result: the element stays visible even while scrolling.

Common mistake: using fixed for too many elements and annoying users.

5) sticky in CSS

Sticky is a mix of relative and fixed: the element scrolls normally, then sticks at a defined point.

.section-title {
    position: sticky;
    top: 0;
    background: white;
}

What does this code do? Makes the title stick to the top when it reaches it during scroll.

Expected result: better navigation in long sections.

Common mistake: forgetting top, so sticky appears not to work.

top / right / bottom / left in CSS

These properties control offset distances, but they only work when position is not static.

.box {
    position: absolute;
    top: 20px;
    right: 50px;
}

z-index in CSS (Stacking Order)

When elements overlap, z-index decides which one appears on top. Higher values appear above lower ones.

.a { z-index: 1; }
.b { z-index: 2; }

What does this code do? The .b element appears above .a if they overlap.

Common mistake: using z-index without positioning the element.

Common Mistakes with position in CSS

1) absolute without a relative parent: positions relative to the page, not the container.

2) sticky not working: usually because top is missing or a parent has overflow restrictions.

3) z-index not working: because position is not set or due to stacking context issues.

FAQ - Common Search Questions

What is the difference between relative and absolute in CSS?

Relative moves the element from its normal position, absolute removes it from flow and positions it relative to the nearest positioned parent.

When should I use fixed in CSS?

For sticky elements like support buttons or fixed top bars.

Why is position: sticky not working in CSS?

Make sure top is set and the parent does not block it with overflow.

How do I place one element above another in CSS?

Use z-index with a positioned element (not static).

Do top/right work with position: static?

No, you need a non-static position.