CSS Layout

CSS Position

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.

CSS Position is commonly used for:

Navigation bars
Popups and modals
Sticky headers
Tooltips
Custom layouts

Syntax

CSS Position Syntax

css

selector {
    position: value;
}

CSS Position Example

css

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

This moves the element 20px to the right from its original position.

Attributes

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;

Example

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>

Output

Browser Output

css

The first box will move 30px to the right from its original position.
The orange box will appear at the top-right corner of its container.
The green box will remain fixed at the bottom-right corner of the browser window, even while scrolling.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

Notes

static is the default value for all elements.
relative keeps the element in the normal document flow.
absolute removes the element from the normal flow.
fixed keeps the element visible while scrolling.
sticky behaves like relative until a scroll threshold is reached.

Positioning often works together with:

top
right
bottom
left

Position Comparison

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

Conclusion

The CSS Position property gives you precise control over element placement. Whether you need a simple offset, a floating button, a sticky navigation bar, or a complex layout, understanding positioning is essential for modern web development.

PreviousCSS Display NextCSS Float