Absolute Position & Relative Position in CSS :-

It’s very Important to understand what is absolute position and relative position and how they behave because while you are designing any UI based control at that time you required to put the content as where the user want.

Note:-UI based control means when you are doing Dragging, Dropping and Resizable functionality then it’s very much help full that how you placing the content inside the page.

Let’s Understand what is Absolute position means :-
Absolute position means the position of the content always starts form the Initial position. Hear initial position means where the first content render starts form their only second content render starts.
For eg:- We have two div and we set each div position as absolute then while rendering where the first div render from their means over the first div second div render; rather coming left side of the first div.

Position of the content means the how many pixel the content from left and top; so what ever position css attribute you may set i.e relative or absolute the at that time left and top comes in to the picture.

Note:- Here It’s Important to Understand that if you are working with Jquery UI i.e resizing or dragging dropping functionality then in case of absolute position set content not affect to any of the content while resizing,but with relative position content if we make resize any of the content then other content form the left side are affected too.Another thing is that dragging any of the content of absolute positioning element to any where not to be affected any of the content and we easily put that content any where of the page where as the content which is set as position as relative are affected to other content while dragging functionality.

Now you might think why so ?

Because in case absolute position set element they render at the same place all the content so when we make the dragging the content form one place to other at that time the position left attribute value starts from the initial position where is it.Hence for all the content the starting position for left value is same hence while dragging or resizing of the content then it won’t affect to other div.

Where as in case of relative the content are placed left side of the previous content not the same position so each content different starting point position of left attribute so while resizing when resizing of one content it’s affect to all other content those which are left side of the content; never affected right side of the content.

Let’s Understand what is Relative position means:-

Relative position in CSS says that the position start just before the previous content end, as we i describe in absolute position that position of an content basically decide upon through left and top.

So the left value of content in relative position decided immediately after the content is placed; that means in relative position the content is placed one after another.In case relative position the left value is calculated after just the content is placed.

Real time scenario How this is being used ?

Real time Scenario :- In web development if we are developing Dynamic div and applying resizing and dragging option then this might help you a lot.
Let gives you quick Example :-

We have a web page where we adding dynamic div by customizing right click option of mouse. After generating div if we set the div position as position absolute then the div will render at the same place where the first div render and when we drag and to other position then the left value of that div will calculated from the initial position of the div, but if we set the position of the div as relative then the div will render one after another rather then rendering one position the div will come one after another.
Hence in real time if we have an requirement is that to put div any where in the page and while dragging it won’t affect to any other div as well as while resizing the div it won’t affect to any other div then we set the position of the div as absolute; hence the div are not affected by any other div we can put any where div and do customization as we want.

Above scenario is taken form Dynamic Dashboard creation and customization.If you have any doubt about above scenario or if have any question feel free to reply me.


If we conclude all the thing what we understand is that Position absolute means the size of the div won’t affect to other div and the left value in case of position absolute should calculated form the initial position where the first div is created.

The position Relative means if the size of any of the div changes then it’s affect to all other div,but keep in mind that the all other div says that the div which is in the left of specific div which div we change the size.

So it’s Useful when you developing app using Jquery Resize,Draggablefunctionality

Without Resizing of the div you can’t get Ideia how the relative and absolute work

Hope the above Explanation makes clear understand that how position relative and absolute work.

For this above explanation Example of absolute and relative position with dynamic div creation Coming Soon.

Keep Reading…

“This time never comes tomorrow, so live in Present and do what ever you want” But never forget to learn new thing which add value to your life.”
Happy Coding ‘SuRyaN’ 🙂


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s