CSS Position

Written by Swapnil RajaUpdated 28 Aug 2026

The CSS Position property is used to control how an element is positioned on a webpage.

By default, HTML elements are displayed according to the normal document flow. The position property allows you to move elements relative to their normal position, a parent element, or the browser window. The supporting concepts are explained in Anchor Positioning and CSS Z-index.

CSS Position is commonly used for:

Navigation bars
Popups and modals
Sticky headers
Tooltips
Custom layouts

Syntax

CSS Position Syntax

css

selector {
    position: value;
}

PreviousCSS Display NextAnchor Positioning

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

Value	Description	Example
static	Default positioning	position: static;
relative	Positioned relative to its normal position	position: relative;
absolute	Positioned relative to nearest positioned ancestor	position: absolute;
fixed	Positioned relative to browser viewport	position: fixed;
sticky	Switches between relative and fixed based on scroll	position: sticky;

CSS Position Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Position Example</title>
    <style>
        .relative-box {
            position: relative;
            left: 30px;
            background-color: lightblue;
            padding: 10px;
            margin-bottom: 20px;
        }
        .container {
            position: relative;
            height: 200px;
            border: 2px solid black;
        }
        .absolute-box {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: orange;
            padding: 10px;
        }
        .fixed-box {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: lightgreen;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="relative-box">Relative Position</div>
    <div class="container">
        <div class="absolute-box">Absolute Position</div>
    </div>
    <div class="fixed-box">Fixed Position</div>
</body>
</html>

Position Type	Affects Layout Flow	Scrolls with Page
static	Yes	Yes
relative	Yes	Yes
absolute	No	Yes
fixed	No	No
sticky	Yes	Partially

CSS Position

Syntax

Attributes

Example

Browser Support

Notes

Position Comparison

Conclusion