Home » CSS » CSS Position: Relative vs Position Absolute

About Siddharth Seth

Siddharth Seth
Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.

CSS Position: Relative vs Position Absolute

In this post, we take a look at the CSS Position property. Specifically, the values Relative and Absolute. CSS stands for Cascading Style Sheet and is a pillar of modern Web. CSS styles the content we see all over the web, it is a language to describe how we want our content, specified using HTML markup, to be displayed or rendered. It is one of the important tool in the tool set of a modern web developer. Let us take a look at one of the important properties of CSS, Position, and the possibilities it opens up to layout content in a web page.

W3C came up with CSS to organize and separate content from display and rendering, styling instructions. Thus was born CSS which consists of a set of rules separate and apart from the content itself, yet having a bearing on the display of the content across mediums.

1. Sample Application

We will build a simple layout as we learn about the CSS position property through this article. I have created a sample Nodejs application which renders a couple of HTML pages. The application structure of the sample application is as follows:

Application Structure

2. CSS Position Property

When we set the position property for an element it is said to be positioned. We use this property to change the place where an element would otherwise be displayed. By default, all elements have the static value for their position property. When we set the value of the position property to a value other than static the element is said to be positioned.

3. CSS Position Absolute

To understand the behavior of elements when its position value is set to the value absolute, we start off with the following layout.

Absolute-Demo.html
 <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/absolute-demo.css">
</head>
<body>
    <div class="container">
        <div class="contained-absolute-div">

        </div>
    </div>
    <p class="content">
        This is an article on CSS Position property.This is an article on CSS Position property.
        This is an article on CSS Position property.This is an article on CSS Position property.
        This is an article on CSS Position property.This is an article on CSS Position property.
        This is an article on CSS Position property.This is an article on CSS Position property.
        This is an article on CSS Position property.
    </p>
    <div class="absolute-div">

    </div>
    <p class="content">
        This is an article on CSS Position property.This is an article on CSS Position property.
        This is an article on CSS Position property.This is an article on CSS Position property.
        This is an article on CSS Position property.This is an article on CSS Position property.
        This is an article on CSS Position property.This is an article on CSS Position property.
        This is an article on CSS Position property.
        This is an article on CSS Position property.This is an article on CSS Position property.
    </p>
</body>
</html> 

The above renders as below:

Initial View

The CSS for the above layout looks like below:

absolute-demo.css
.absolute-div {
    background-color: blue;
    height: 120px;
    width: 120px;
}
.container {
    height: 200px;
    width: 200px;
    background-color: green;
}
.contained-absolute-div {
    height: 120px;
    width: 120px;
    background-color: cyan;
}

Without the position property set the top, bottom, right and left properties are ineffective. So, let us apply absolute positioning to both the blue box and the Cyan one. We will make add the following changes to the CSS.

absolute-demo.css
.contained-absolute-div {
    height: 120px;
    width: 120px;
    background-color: cyan;
    position: absolute;
    bottom: 0;
}
.absolute-div {
    background-color: blue;
    height: 120px;
    width: 120px;
    position: absolute;
}

Now let us take a look at the changes effected by the new CSS position property.

Output — Absolute-demo.html

Observing the above screen grab we can see that once the value of absolute is applied to an element, it is removed from the normal document flow. What that means is other elements surrounding the absolutely positioned element act as if it is not their. Like the second paragraph shifts up to take up the space occupied by the blue box. Another thing to note is that when the CSS bottom property is set to 0, like in the case of Cyan box, it is relative to its nearest positioned container or the body if no container is positioned. Thus the box escapes its container and lands up right at the bottom of the page.

Now let us take a look as to what happens when the container of a absolutely positioned element is positioned. We modify the style sheet to look like below:

absolute-demo.css
.content {
    text-decoration: lightgrey;
}
.absolute-div {
    background-color: blue;
    height: 120px;
    width: 120px;
    position: absolute;
}
.container {
    height: 200px;
    width: 200px;
    background-color: green;
    position: relative;
}
.contained-absolute-div {
    height: 120px;
    width: 120px;
    background-color: cyan;
    position: absolute;
    bottom: 0;
}

The output post the above changes look like below:

Output — Absolute-Demo.html

As we can see from the above screen grab, the positioning of the container of Cyan box causes it to behave differently. The Cyan box is attached to the bottom of its container instead of the page. The container can have any value for the position property except static and the results would still be the same. We can conclude that, An absolutely positioned element is rendered relative to its nearest positioned container or in its absence the body element.

4. CSS Position Relative

We start off with the below markup to study the behavior of the Relative value of position property.

Relative-Demo.html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/relative-demo.css">
</head>
<body>
    <p class="content">
        This is an article on CSS Position property.
This is an article on CSS Position property.
        This is an article on CSS Position property.
This is an article on CSS Position property.
        This is an article on CSS Position property.
This is an article on CSS Position property.
        This is an article on CSS Position property.
This is an article on CSS Position property.
       This is an article on CSS Position property.
        This is an article on CSS Position property.
This is an article on CSS Position property.
        This is an article on CSS Position property.
        This is an article on CSS Position property.
        This is an article on CSS Position property.
This is an article on CSS Position property.
        This is an article on CSS Position property.
This is an article on CSS Position property.
        This is an article on CSS Position property.
This is an article on CSS Position property.
        This is an article on CSS Position property.
This is an article on CSS Position property.
        This is an article on CSS Position property.
This is an article on CSS Position property.
        This is an article on CSS Position property.            
    </p>
    <div class="relative-div">
</div> </body> </html>

The above HTML renders as below:

Initial layout — Relative Positioning

The CSS rules for the above are as follows:

relative-demo.css
.content {
    text-decoration: lightgrey;
}
.relative-div {
    background-color: blue;
    height: 120px;
    width: 120px;
}

Now let us modify CSS rules to apply Relative positioning to the blue box. We need to make change to the CSS so that it looks like below:

relative-demo.css
.content {
    text-decoration: lightgrey;
}
.relative-div {
    position: relative;
    background-color: blue;
    height: 120px;
    width: 120px;
    bottom: 120px;
}

The above CSS effects the changes as below:

Output — Relative-Demo.html

We can see that the blue box has moved up covering the paragraph content. This is due to the application of relative positioning and application of bottom property with value 120px. What relative positioning does is pull the content out of the document flow and positions it relative to its original position. In our case it is moved up by 120px from its original location.

5. Conclusion

Having observed the behavior of both positioning, viz., Absolute and Relative. We can see that Absolute positioning places content relative to its positioned container or the body of the document. Whereas Relative positioning places content relative to its original position had it not been positioned.

6. Download the source code

This was an article on CSS Position: Absolute vs Position Relative. To run the code, you need to simply run the following commands from the root of the project

npm install

>npm install
>npm start
Download
You can download the full source code of this example here: CSS Position: Relative vs Position Absolute
(+4 rating, 4 votes)
You need to be a registered member to rate this.
Start the discussion Views Tweet it!
Do you want to know how to develop your skillset to become a Java Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. JPA Mini Book
2. JVM Troubleshooting Guide
3. JUnit Tutorial for Unit Testing
4. Java Annotations Tutorial
5. Java Interview Questions
6. Spring Interview Questions
7. Android UI Design
and many more ....
I agree to the Terms and Privacy Policy

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of