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. 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;
}

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>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
position	1	12	1	1

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

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