Relative vs Absolute vs Fixed Position in CSS

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 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
<!--Driver Code Ends-->

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

<!--Driver Code Starts-->
</head>

<body>
    <h1>position: relative;</h1>

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

</html>

<!--Driver Code Ends-->

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 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
<!--Driver Code Ends-->

    <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>

<!--Driver Code Starts-->
</head>

<body>
    <h1>position: absolute;</h1>

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

</html>

<!--Driver Code Ends-->

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 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
<!--Driver Code Ends-->

    <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>

<!--Driver Code Starts-->
</head>

<body>
    <h1>position: absolute;</h1>

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

</html>

<!--Driver Code Ends-->

Differences Between Relative, Absolute, and Fixed Positioning

PropertyRelativeAbsoluteFixed
Position ReferencePositioned relative to its normal location in the flow.Positioned relative to the closest positioned ancestor or the document body if no ancestor is found.Positioned relative to the browser window (viewport).
Affects Other ElementsNo, it doesn’t affect the position of other elements.Yes, it is removed from the document flow, and other elements may shift.No, it is removed from the document flow.
Scroll BehaviorMoves along with the page when scrolling.Moves along with the page when scrolling.Stays fixed in place even when the page is scrolled.
Original SpaceRetains its original space in the document layout.Does not retain its original space; other elements may occupy it.Does not retain any space in the document layout.
Use CaseUsed to move an element slightly from its original position.Used for exact positioning within a container or page.Used for sticky elements like headers, footers, or buttons.
Stacking ContextCan create a new stacking context if z-index is applied.Creates a new stacking context based on the ancestor’s stacking order.Always creates a new stacking context.
Common UsageMinor adjustments like nudging elements.Precise positioning within a specific container or overlay effects.Fixed navigation bars, banners, or call-to-action buttons.
Comment

Explore