Hackernoon logoPosition Layout property in CSS by@tensorrick

Position Layout property in CSS

image
Adipta Biswas Hacker Noon profile picture

@tensorrickAdipta Biswas

Hello👋! I am a Analytics consultant 📊 turned Web developer 🖥️.

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

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.