Relative and absolute positioning in CSS


absolute

CSS positioning of elements is really sometimes confusing but is very easy to understand. Lets start with static position.
Static position is default for any element on a Web page. If position of element is not defined , it will be static and would display inside the normal flow of the page.

If you try to apply rules like top , bottom , left or right to static element , will be ignored.

Absolute Positioning

This is the easiest property to learn and understand. When absolute position is applied to an element it is taken out from the normal flow of document and is positioned to defined top ,left, bottom or right of the body.

Consider the following HTML code:

1
2
3
4
5
6
<div class="container">
	<div class="normal">This is normal text block </div>
	<div class="normal">This is normal text block </div>
	<div class="normal">This is normal text block </div>
	<div class="demo-position">This is an absolute block </div>
</div>

and its CSS as:

1
2
3
.container{margin:120px;}
.normal, .demo-position{padding:10px;border:1px solid #000;background:#ccc}
.demo-position{position:absolute;top:0;left:0;background:#eee;}

Here is the output:

absolute

Relative positioning
Relative positioning uses the same four positioning properties as absolute positioning. But instead , it starts from where the normal flow of the element.

Most important thing is to note that if absolute element is inside relative element, it consider relative element as its parent element and will positioned accordingly.

Lets make little addition in above CSS. We will simply add “position:relative” to div container

1
2
3
.container{margin:120px;position:relative}
.normal, .demo-position{padding:10px;border:1px solid #000;background:#ccc}
.demo-position{position:absolute;top:0;left:0;background:#eee;}

and find out the change as :
relative

You will find absolute positioned div is now inside div container which was positioned relative.

isn’t it was easy?

That’s it!!
Cheers!

Recently Published

»

Combine HTML5 & Bootstrap As Key Ingredients For Rebooting Your Business

HTML5 has achieved the tremendous heights in the recent years owing ...

»

10 Tips On Social Media That Will Land Your Dream Job

A job search trends survey conducted by Jobvite showed that 48% of ...

»

10 Best Node.js Frameworks For Web And Apps Development

Node.js is counted among one of the most renowned JavaScript runtime ...

»

Fetch Your Customers : Retail Commerce

As listening the word commerce it comes in our mind that it is ...

»

Best App Design Practices for 2016

The year 2015 witnessed some groundbreaking revolution regarding app ...

»

9 Websites To Visit For Exemplary Footer Design Inspiration

When we set out to design a website, our primary focus is on the ...

»

What are the Cloud Computing trends to dominate in 2016

With Cloud computing, it has developed cell phones into a remote ...

»

How to Show Related Posts in WordPress Without a Plugin?

Making your visitors go through each post increases the browsing time ...

»

Noteworthy Facts About Android App Piracy and How It Can Be Dealt With

Are you a gaming aficionado, and obsessed with gaming apps? Do you ...