CSS Positions

The different types of CSS position properties can help you to change or manipulate the position of an element on a page. There are mainly five types of position values that we use as follow:

1. Static

2. Relative

3. Absolute

4. Sticky

5. Fixed

Let's begin understanding it one by one.

1. Static:

Each element has a static position by default. So, if we do not assign any position to a particular element it will behave static. When we try to assign properties like a top, right, bottom and left then the element will not move from its original position or there will be no change in that element. Let's understand it by a simple example in codepan.

.one {
        background-color: #46b2e0;
        position: static;
      }

2. Relative:

An element with relative position is positioned to the normal flow of the HTML document and it enables top, right, bottom and left properties to move that element around.

.two {
        background-color: #6ac47e;
        position: relative;
        left: 30px;
      }

3. Absolute:

The element with absolute position is removed from the normal document flow and there is no additional space is created for the element on the page. Its final position will be determined by the properties assigned to it like a top, right, bottom, or left.

.three {
        background-color: #d9d55b;
        position: absolute;
        top: 120px;
        left: 200px;
      }

4. Sticky:

An element with sticky value is a combination of relative and fixed positions which will behave with relative value initially until the scroll location of the viewpoint reaches a specified offset position then it will behave like fixed position property.

.four {
        background-color: #f7cd2e;
        position: sticky;
        top: 20px;
        left: 600px;
      }

5. Fixed:

The element with a fixed position also acts as the same absolute value like removed from the flow of the document, but it stays in the same place even if the page is scrolled like a fixed position.

.five {
        background-color: #ff6263;
        position: fixed;
        right: 30px;
        bottom: 0;
      }

Now, let's put it all together and see what it will look like,

Thank you for reading.