CSS property — Position

Hello, World! In this content, we will try to grab the concepts of one of the trickiest and crucial topics in CSS.

Position layout property in CSS is solely used to place and position elements respectively in an HTML document. They assign respective positions to HTML elements so that the overall design of our page is maintained and managed well.

The widely used position property in CSS are as follows:

Static position:

When an HTML element gets assigned with static position, the various position properties like left, right, top and bottom doesn't work. Elements in an HTML document carry static position by default.

Let’s copy and paste the code below in an IDE to view what’s happening.

Upon adding position property static to the selector id Div2, we saw that the position of Div2 box didn't change. Hence, we can conclude that elements with position static doesn't get affected by left, right, top or bottom properties.

Relative position:

When an element gets assigned with position relative, the position properties like left, right, top and bottom affects the element's position in the page relative to it's normal position as static.

Let’s copy and past the code below to Div2 selector to replace the previous position property.

#Div2 {
        position: relative;
        left: 20px;
        top: 50px;
      }

We can see that the Div2 box changed it's position relative to it's normal or static position, i.e. 20px from the left and 50px from the top. Upon applying relative position property to an element, other contents in the same box doesn't get affected and change positions.

Fixed position:

This position property is used to freeze an element in a particular location of the page so that scrolling doesn’t affect the visibility or location of the element. When we apply fixed value to a selector, it gets removed from the flow of the HTML document, i.e. the selector element gets uprooted from it's actual position, becomes relative to the entire viewport and doesn't get scrolled.

Let’s copy and past the code below to know the difference.

After scrolling, we can see that the id Div2 gets fixed in the topmost corner of the document.

Absolute position:

Just like fixed position, the absolute position property removes selectors from the flow. As the element gets removed from it's normal position, the parent element doesn't regard it as it's child anymore. The element becomes relative to the document.

Let’s copy and paste the code below to see how absolute position affects the element.

We can see that the element with id Div2 becomes absolute to a parent element with id overall. Let's tweak the code to see how the element with absolute position behave if there are no parent elements with non static position value.

#overall {
        background-color: orange;
        border: solid;
        /* position: relative; */
        font-family: monospace;
        font-size: 3rem;
      }

The selector element with id Div2 gets absolute with the document.

When absolute position property is applied to an element, it becomes relative to it's parent element if and only if the parent element is not positioned static. The element becomes absolute to it's nearest parent with position value apart from static.