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

»

Importance and actions of cloud computing in e-commerce business

The e-commerce industry is growing in leaps and bounds, and, ...

»

How to remove Options from One Select Box and retain One Option?

One can easily remove  options of a select box from HTML and append ...

»

How to Ensure that Users Do Not Deactivate The Critical WordPress Plugins

It’s no secret that among all the remarkably useful features of ...

»

How to scroll to the top of a webpage using jQuery ?

If you are looking for an extraordinary method of smoothly scrolling ...

»

11 sources to gain perfect knowledge of html5 semantic tags

1. Html5tuts Html5tuts is a site dedicated to HTML5. Feel free to ...

»

How to move an element into another parent element using jQuery?

An important piece to the puzzle when coding with jQuery is that how ...

»

10 optionally Good WordPress Typography Plugins You could Opt For

It is not necessary that the person will follow the standard guide ...

»

8 creative 3d slider wordpress themes to keep your blog active

1. Display Display is a WordPress Theme best used for Portfolio and ...

»

11 quick remote screen sharing apps worth trying

1. Join Me Easy to start, easy to join, easy to manage, join.me takes ...