CSS position Property

The CSS position property is used to define the position of an element on a webpage.

The location of the positioned element is set with the four properties: top, left, right, and bottom. These properties only work when the position property is set and have different positioning behaviors.

The position property has the following five values:

  • static (default value)
  • relative
  • absolute
  • fixed
  • sticky

We will look into each of them.


CSS static Position

The static value of the position property allows elements to be positioned accordingly to the normal flow of the document. The static position is not affected by the top, right, bottom, and left values.

Let's see an example,

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

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS position</title>
    </head>

    <body>
        <p>This is a normal paragraph.</p>
        <p class="main">This paragraph is positioned using the static value.</p>
        <p>This is a normal paragraph.</p>
    </body>

</html>
p {
    border: 1px solid black;
    padding: 4px;
}

p.main {
    position: static;
    top: 50px; /* doesn't work */
    right: 50px; /* doesn't work */
    bottom: 50px; /* doesn't work */
    left: 50%; /* doesn't work */
    background-color: greenyellow;
}

Browser Output

CSS Position Static Example

Note: The static value is the default value for the position property.


CSS Relative Position

The relative value positions the element relative to the original position in the document. The element is positioned with the top, right, bottom, and left values.

Let's see an example,

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

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS position</title>
    </head>

    <body>
        <p>This is a normal paragraph.</p>
        <p class="main">
            This paragraph is positioned with a relative value of top 50px and
            left 40px.
        </p>
        <p>This is a normal paragraph.</p>
    </body>

</html>
p {
    border: 1px solid black;
    padding: 4px;
}

p.main {
    position: relative;
    /* positions 90px from the top */
    top: 90px;

    /* positions 40px from the left */
    left: 40px;
    background-color: greenyellow;
}

Browser Output

CSS Position Relative Example

In the above example, the second paragraph is positioned relative to its normal flow i.e. 90px from the top and 40px from the left of the original position.

The space is preserved in the original position of the element.


CSS Absolute Position

The absolute value removes the element completely from its normal flow in the document.

The element is positioned relative to their closest positioned parent element (an ancestor element with a position value other than static).

If there is no positioned ancestor, they are positioned relative to the document itself.

Let's see an example,

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

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS position</title>
    </head>

    <body>
        <p>This is a normal paragraph.</p>
        <p class="main">
            This is an absolutely positioned paragraph at 40px top and 60px left.
        </p>
        <p>This is a normal paragraph.</p>
    </body>

</html>
p {
    border: 1px solid black;
    padding: 4px;
}

p.main {
    position: absolute;
    top: 70px;
    left: 60px;
    background-color: greenyellow;
}

Browser Output

CSS Position Absolute Example

In the above example, the second paragraph doesn't have a positioned parent element, so it is positioned relative to the viewport (visible area of the browser).

Let's see an example to understand how the absolute position works with positioned parent element:

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

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS position</title>
    </head>

    <body>
        <p>This is a normal paragraph.</p>
        <p class="main">
            This is an absolutely positioned paragraph at 40px top and 60px
            left.
        </p>
        <p>This is a normal paragraph.</p>

        <!-- Creating an container -->

        <div class="parent">
            <p>This paragraph is inside the div element.</p>
            <p class="main">
                This is an absolutely positioned paragraph inside the div
                element at 40px top and 60px left.
            </p>
            <p>This paragraph is inside the div element.</p>
        </div>
    </body>

</html>
p {
    border: 1px solid black;
    padding: 4px;
}

p.main {
    position: absolute;
    top: 70px;
    left: 60px;
    background-color: greenyellow;
}

div.parent {
    position: relative;
    background-color: orange;
    border: 4px solid red;
}

Browser Output

CSS Position Absolute Nested Example

Here, even though both paragraphs of the main class are given the same styles, their positions are different. This is because the first paragraph doesn't have a positioned parent element, so it is positioned relative to the document (viewport).

On the other hand, the second paragraph has a parent div element with a relative position value and is hence positioned relative to the div element.

Note: An absolutely positioned element loses its size and original space in the document flow.


CSS fixed Position

The fixed value positions an element to remain fixed in the same position, even when the page is scrolled. It is similar to the absolute value, but it remains relative to the viewport at all times.

Let's see an example,

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

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS position</title>
    </head>

    <body>
        <p class="main">
            This paragraph has a fixed position value at 10px top.
        </p>
        <p>This is a normal paragraph.</p>
        <p>This is a normal paragraph.</p>
        <p>This is a normal paragraph.</p>
        <p>This is a normal paragraph.</p>
        <p>This is a normal paragraph.</p>
        <p>This is a normal paragraph.</p>
        <p>This is a normal paragraph.</p>
    </body>

</html>
p {
    border: 2px solid black;
    padding: 4px;
}

p.main {
    position: fixed;
    top: 10px;
    background-color: greenyellow;
}

Browser Output

This parapraph has a fixed position value at 10px top.

This is a normal paragraph.

This is a normal paragraph.

This is a normal paragraph.

This is a normal paragraph.

This is a normal paragraph.

This is a normal paragraph.

This is a normal paragraph.

In the above example,

position: fixed;
top: 10px;

fixes the paragraph at the 10px distance from the top in the webpage. The paragraph doesn't scroll with the other content in the document.


CSS sticky Position

The sticky value positions the element as a combination of relative and fixed values.

The sticky position behaves like relative positioning until the element reaches a certain scroll point on the screen. After that, the element sticks to the top of the viewport like a fixed element.

Let's see an example,

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

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>CSS position</title>
    </head>

    <body>
        <p class="main">
            This paragraph has a fixed position value at 10px top.
        </p>
        <p>This is a normal paragraph.</p>
        <p>This is a normal paragraph.</p>
        <p>This is a normal paragraph.</p>
        <p>This is a normal paragraph.</p>
        <p>This is a normal paragraph.</p>
        <p>This is a normal paragraph.</p>
        <p>This is a normal paragraph.</p>
    </body>

</html>
p {
    border: 2px solid black;
    padding: 4px;
}

p.main {
    position: fixed;
    top: 10px;
    background-color: greenyellow;
}

Browser Output

This is a normal paragraph.

This parapraph is set sticky position at top 10px.

This is a normal paragraph.

In the above example, the paragraph remains scrollable until it reaches to 10px distance from the top of the viewport. After that, it remains in the sticky position.

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges