Rohtash Talan's Blog

Details guide to position in CSS with code examples

Rohtash Talan's photo
Rohtash Talan
·

5 min read

Before you can be very good at CSS, you must first learn the fundamentals. You must be familiar with CSS attributes and their values.

This article will concentrate on the CSS position attribute. We'll go through the various CSS position property values and how they operate. Let's get started!

What is the CSS position?

CSS position specifies the location of an element on a page. This attribute, together with the left, right, top, bottom, and z-index properties, determines an element's ultimate position on a webpage.

There are five types of the position property can take. They are:

  1. static
  2. relative
  3. absolute
  4. fixed
  5. sticky

Let's discuss each one of them.

Static

This is the element's default value. The element is placed in accordance with the usual flow of the webpage. The values left, right, top, bottom, and z-index have no effect on an element with position: static.

Let's use an example to demonstrate that position: static has no influence on an element's position. Three divs are contained within a parent container. This sample will be used throughout this article.

<html>
    <head>
        <style>
            .main-element {
        position: static;
        left: 10px;
        bottom: 10px;
        background-color: yellow;
        padding: 10px;
    }

    .sibling-element {
        padding: 10px;
        background-color: #f2f2f2;
    }
        </style>
    </head>
        <body>
            <div class="parent-element">
                <div class="sibling-element">
                    I am sibling element.
                </div>

                <div class="main-element">
                    All eyes on me. I am the main element.
                </div>

                <div class="sibling-element">
                    I am other sibling element.
                </div>
            </div>
        </body>
    <html>

Add position: static to the div with the class main-element and the values left & top to it. We additionally style the other divs to distinguish them from the element in focus.

This is the result.

image.png

Did you notice that it there's no change? This confirms the fact that the left and bottom properties do not affect an element with position: static.

Relative

Elements with position: relative remain in the normal flow of the document. But, unlike static elements, the left, right, top, bottom and z-index properties affect the position of the element. An offset, based on the values of left, right, top and bottom properties, is applied to the element relative to itself.

Let's replace position: static with position: relative in our example.

<html>
    <head>
        <style>
      .main-element {
    position: relative;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}
    .sibling-element {
        padding: 10px;
        background-color: #f2f2f2;
    }
        </style>
    </head>
        <body>
            <div class="parent-element">
                <div class="sibling-element">
                    I am sibling element.
                </div>

                <div class="main-element">
                    All eyes on me. I am the main element.
                </div>

                <div class="sibling-element">
                    I am other sibling element.
                </div>
            </div>
        </body>
    <html>

image.png

Notice that the left and bottom properties now affect the position of the element. Also notice that the element remains in the normal flow of the webpage and the offset is applied relative to itself.

Absolute

Elements with position: absolute are positioned relative to their parent elements. In this case, the element is removed from the normal page flow. The other elements will behave as if that element is not in the webpage. The values of left, top, bottom and right determine the final position of the element.

One thing to note is that an element with position: absolute is positioned relative to its closest positioned parent. That means that the parent element has to have a position value other than position: static.

<html>
    <head>
        <style>

  .main-element {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 100px;
    padding: 10px;
    background-color: #81adc8;
}

.sibling-element {
    background: #f2f2f2;
    padding: 10px;
    border: 1px solid #81adc8;
} 

        </style>
    </head>
        <body>
            <div class="parent-element">
                <div class="sibling-element">
                    I am sibling element.
                </div>

                <div class="main-element">
                    All eyes on me. I am the main element.
                </div>

                <div class="sibling-element">
                    I am other sibling element.
                </div>
            </div>
        </body>
    <html>

Here's the result.

image.png

Notice that no space was created in the webpage for the element. The element is now positioned relative to the parent element.

Fixed

Fixed position elements are similar to absolutely positioned elements. They are also removed from the normal flow of the document. But unlike absolutely positioned element, they are always positioned relative to the <html> element.

One thing to note is that fixed elements are not affected by scrolling. They always stay in the same position on the screen.

<html>
    <head>
        <style>

.sibling-element {
    background: #f2f2f2;
    padding: 10px;
  border: 1px solid #81adc8;
} 

.main-element {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 100px;
    padding: 10px;
    background-color: #81adc8;
}

html {
    height: 1000px;
}
        </style>
    </head>
        <body>
            <div class="parent-element">
                <div class="sibling-element">
                    I am sibling element.
                </div>

                <div class="main-element">
                    All eyes on me. I am the main element.
                </div>

                <div class="sibling-element">
                    I am other sibling element.
                </div>
            </div>
        </body>
    <html>

Here's the result.

In this case, the element is positioned relative to the element. Try scrolling to see that the element gets fixed on the screen.

Let's move to the final value.

Sticky

position: sticky is a mix of position: relative and position: fixed . It acts like a relatively positioned element until a certain scroll point and then it acts like a fixed element. Don't worry if you don't understand what this means, the example will help you to understand it better.

<html>
    <head>
        <style>
.sibling-element {
    background: #f2f2f2;
    padding: 10px;
  border: 1px solid #81adc8;
} 

.main-element {
    position: sticky;
    top: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 800px;
    padding: 50px 10px;
    background-color: #81adc8;
}
        </style>
    </head>
        <body>
            <div class="parent-element">
                <div class="sibling-element">
                    I am sibling element.
                </div>

                <div class="main-element">
                    All eyes on me. I am the main element.
                </div>

                <div class="sibling-element">
                    I am other sibling element.
                </div>
            </div>
        </body>
    <html>

Here's the result.

Scroll on the result tab to see the result. You see it acts as a relative element until it gets to a certain point on the screen, top: 10px and then it gets there just like a fixed element.

Summary

That has been quite a ride. But I really hope this article helped you understand the CSS position property and how it works. Remember that getting better at CSS takes consistent practice. So continue to practice and you'll improve.