Relative vs Absolute vs Fixed Position in CSS (original) (raw)

Last Updated : 4 Jun, 2026

CSS positioning is used to control the placement and arrangement of elements on a webpage. It helps developers create structured, responsive, and visually appealing web layouts.

• Common positioning types include relative, absolute, and fixed.
• Allows precise control over element location and alignment.
• Widely used for menus, popups, navigation bars, and page layouts.

Relative Positioning

Relative Positioning is a CSS positioning method that moves an element from its normal position using top, right, bottom, or left. The original space remains reserved, so other elements do not shift to fill the gap.

**Syntax

position: relative;

**Example: It is an example of position: relative; property. The element is shifted 50px to the right using the left property, but it still occupies its original space in the document flow.

HTML `

<style>
    div.relative {
        position: relative;
        left: 50px;
        border: 3px solid #73AD21;
    }
</style>

position: relative;

<div class="relative">
    This element has position:relative;
</div>

`

Absolute Positioning

Absolute Position is another CSS technique that adjusts an element’s position relative to its parent. If no parent element is present, the document body is used as the parent. The syntax for absolute positioning is position: absolute;

**Syntax

position: absolute;

**Example: It is an example of position: absolute; property. The absolute element is positioned 80px from the top and right of its closest positioned ancestor (the relative container).

HTML `

<style>
    div.relative {
        position: relative;
        width: 400px;
        height: 200px;
        border: 3px solid #73AD21;
    }
    
    div.absolute {
        position: absolute;
        top: 80px;
        right: 80px;
        width: 200px;
        height: 100px;
        border: 3px solid #73AD21;
    }
</style>

position: absolute;

<div class="relative">
    This element has position: relative;
    <div class="absolute">
        This element has position: absolute;
    </div>
</div>

`

Fixed Positioning

Fixed Position is a CSS technique that keeps an element in the same place even when the page is scrolled. The syntax for fixed positioning is position: fixed;. To position the element, we use top, right, bottom, and left properties.

**Syntax

position: fixed;

**Example: It is an example of position: fixed; property. The fixed element will remain in the same position (bottom-right corner) of the browser window, even when the page is scrolled.

HTML `

<style>
    div.fixed {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 300px;
        border: 3px solid #73AD21;
    }

    div.absolute {
        position: absolute;
        top: 150px;
        right: 80;
        width: 200px;
        height: 100px;
        border: 3px solid #73AD21;
    }
</style>

position: absolute;

<h2>position: fixed;</h2>
<div class="absolute">
    This element has position: absolute;
</div>

`

Differences Between Relative, Absolute, and Fixed Positioning