Position Layout property in CSS

Hello, World! In this article, we will try to grasp 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 positions property in CSS are as follows:

1. 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.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #Section {
        height: 200vh;
        width: 800px;
        border: 5px solid blue;
        background-color: cyan;
        font-family: monospace;
        font-size: 2rem;
        text-align: center; 
      }

      #Div1, #Div2, #Div3 {
        border: 4px solid red;
        font-size: 1.5rem;
        width: 200px;
        height: 100px;
        text-align: center;
        display: inline-block;
      }

      #Div2 {
        position: static;
        left: 20px;
        top: 50px;
      }
    </style>
  </head>
  <body>
    <section id="Section">
      <p>This is Section</p>
      <div id="Div1">
        <p>This is Div 1</p>
      </div>
      <div id="Div2">
        <p>This is Div 2</p>
      </div>
      <div id="Div3">
        <p>This is Div 3</p>
      </div>
    <section>
  </body>
</html>

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

bottom

properties.

2. 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 its normal position as

static

Let's copy and paste 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 its position relative to its 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 won't get affected and change positions.

3. 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 its actual position, becomes relative to the entire viewport, and doesn't get scrolled.

Let's copy and paste the code below to know the difference.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #Section {
        height: 400vh;
        width: 800px;
        border: 5px solid blue;
        background-color: cyan;
        font-family: monospace;
        font-size: 2rem;
        text-align: center; 
      }
      #Div1, #Div2, #Div3 {
        border: 4px solid red;
        font-size: 1.5rem;
        width: 200px;
        height: 100px;
        text-align: center;
        display: inline-block;
      }
      #Div2 {
        position: fixed;
        left: 0;
        top: 0;
      }
    </style>
  </head>
  <body>
    <section id="Section">
      <p>This is Section</p>
      <div id="Div1">
        <p>This is Div 1</p>
      </div>
      <div id="Div2">
        <p>This is Div 2</p>
      </div>
      <div id="Div3">
        <p>This is Div 3</p>
      </div>
    <section>
  </body>
</html>

After scrolling, we can see that the id

Div2

gets fixed in the topmost corner of the document.

4. Absolute position:

Just like

fixed

position, the

absolute

position property removes selectors from the flow. As the element gets removed from its normal position, the parent element doesn't regard it as its 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.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #Section {
        height: 400vh;
        width: 800px;
        border: 5px solid blue;
        background-color: cyan;
        font-family: monospace;
        font-size: 2rem;
        text-align: center; 
        position: static;
      }
      #Div1, #Div2, #Div3 {
        border: 4px solid red;
        font-size: 1rem;
        width: 200px;
        height: 100px;
        text-align: center;
        display: inline-block;
      }
      #Div2 {
        position: absolute;
        left: 0;
        top: 0;
      }
      #overall {
        background-color: orange;
        border: solid;
        position: relative;
        font-family: monospace;
        font-size: 3rem;
      }
    </style>
  </head>
  <body>
    <section id="overall">
      <p>Overall</p>
    <section id="Section">
      <p>This is Section</p>
      <div id="Div1">
        <p>This is Div 1</p>
      </div>
      <div id="Div2">
        <p>This is Div 2</p>
      </div>
      <div id="Div3">
        <p>This is Div 3</p>
      </div>
      </section>
    </section>
  </body>
</html>

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 its parent element if and only if the parent element is not positioned

static

. The element becomes absolute to its nearest parent with position value apart from

static