CSS Position Property

by

The CSS Position Property is used to define how an element is placed in the document flow. It determines whether an element is static, relative, absolute, fixed, or sticky. Each type of positioning behaves differently and affects how elements appear on the page.

Types of CSS Position Property

CSS provides five different types of position values:

  1. static (default)
  2. relative
  3. absolute
  4. fixed
  5. sticky

1. position: static (Default Positioning)

What is it?

  • This is the default position of all elements in HTML.
  • The element is placed normally in the document flow.
  • Any top, left, right, or bottom values do not affect a static element.
  • It remains in the order it appears in the HTML code.

Example of static Position

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .static-box {
            position: static;
            /* Default position */
            width: 250px;
            height: 100px;
            background-color: lightblue;
            border: 2px solid navy;
            margin: 10px;
            padding: 10px;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div class="static-box">I am static (default).</div>
</body>

</html>
HTML

output:

I am static (default).

Key Features of static Position

  • Elements do not move when you apply top, left, right, or bottom.
  • This position does not break the normal document flow.
  • Best used for default block elements like paragraphs and divs.

2. position: relative

What is it?

  • The element is positioned relative to its normal position.
  • Unlike static, the element can be moved using top, left, right, or bottom.
  • It still occupies its original space, but visually it shifts to a new position.

Example of relative Position

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .relative-box {
            position: relative;  /* Moves from its normal position */
            width: 250px;
            height: 100px;
            background-color: lightcoral;
            border: 2px solid darkred;
            margin: 10px;
            padding: 10px;
            text-align: center;
            line-height: 100px;
            top: 20px;  /* Moves 20px down */
            left: 30px;  /* Moves 30px right */
        }
    </style>
</head>

<body>
    <div class="relative-box">I am relative.</div>
</body>

</html>
HTML

output:

I am relative.

Key Features of relative Position

  • Moves relative to its original place.
  • Does not affect other elements around it.
  • Useful for making small adjustments to elements.

3. position: absolute

What is it?

  • The element is removed from the normal flow.
  • It is positioned relative to the nearest positioned ancestor.
  • If no ancestor has relative, absolute, or fixed, it positions itself relative to the <html> tag.

Example of absolute Position

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            position: relative;  /* Parent container */
            width: 400px;
            height: 300px;
            background-color: lightgray;
            border: 2px solid gray;
            margin: 10px;
            text-align: center;
        }

        .absolute-box {
            position: absolute;
            width: 150px;
            height: 80px;
            background-color: orange;
            border: 2px solid darkorange;
            text-align: center;
            line-height: 80px;
            top: 50px; /* Moves 50px down */
            left: 100px; /* Moves 100px right */
        }
    </style>
</head>

<body>
    <div class="parent">
        Parent Container (relative)
        <div class="absolute-box">I am absolute.</div>
    </div>
</body>

</html>
HTML

output:

Parent Container (relative)
I am absolute.

Key Features of absolute Position

  • The element does not take up space in normal flow.
  • It is positioned relative to the nearest positioned ancestor.
  • Used for dropdowns, pop-ups, and overlays.

4. position: fixed

What is it?

  • The element is removed from the normal document flow.
  • It is positioned relative to the viewport (browser window).
  • It stays fixed in place even when the user scrolls.

Example of fixed Position

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fixed-box {
            position: fixed;
            width: 100%;
            height: 50px;
            background-color: black;
            color: white;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div class="fixed-box">I am fixed.</div>
</body>

</html>
HTML

Key Features of fixed Position

  • The element does not move even when scrolling.
  • Used for navigation bars, floating buttons, and sticky elements.

5. position: sticky

What is it?

  • The element acts like relative initially, but becomes fixed when scrolled past a certain point.
  • It sticks to a specified position (top, left, right, or bottom).
  • Requires a scrolling container.

Example of sticky Position

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sticky-box {
            position: sticky;
            width: 100%;
            height: 50px;
            background-color: green;
            color: white;
            top: 0;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div class="sticky-box">I am sticky.</div>
</body>

</html>
HTML

output:

I am sticky.

Key Features of sticky Position

  • Acts like relative initially, then sticks when scrolling.
  • Useful for sticky headers, sidebars, and floating menus.

Conclusion

position TypeBehavior
staticDefault position, follows normal document flow
relativeMoves relative to itself, does not affect others
absoluteRemoved from flow, positioned relative to parent
fixedAlways stays in place, independent of scrolling
stickySticks to a position when scrolling