It’s very important to understand what absolute position and relative position are and how they behav, because while you are designing pages using JQuery UI content at that time you may required to put the content where the user wants.
That means I am explaining about JQuery Core UI and if you provide Dragging, Droping and Resizable functionality for html control, then this article will help you understand how you should change the position of html control so that others are not affected inside the page.
Let’s Understand what Absolute position means
Absolute position means the position of the content always starts form the Initial position. Here initial position means where the first content render starts from then only the second content render starts.
For example: We have two div and we set each div position as absolute, then while rendering where the first div renders from that means over the top of first div second div render; rather than comingfrom the left side of the first div.
Position of the content means how many pixels the content is from left and top; so whatever position css attribute you may set, i.e relative or absolute, 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 if you set the positions absolute then it doesn't affect any of the content while resizing, but with relative position content if we resize any of the content then other content from the left side are affected too. Another thing is that dragging any of the content of absolute positioning element to anywhere doesn't affect any of the content and we easily put that content anywhere on the page whereas the content which is set as position as relative affects other content while dragging functionality.
Now you might think why?
Because ithe left value of content in relative position is decided immediately after the content is placed; that means in relative position the content are placed one after another. In the caseof relative position the left value is calculated after just the content is placed.
It won’t affect other elements.
Whereas in case of relative, the content are placed to the left side of the previous content not the same position, so each content has a different starting point position of left attribute, so while resizing when resizing of one content it affects all other content, those which are left side of that content; it never affects right side of the content.
Let’s Understand what is Relative position means
Relative position in CSS says that the position starts just before the previous content ends, as I describe in absolute position that position of a content is basically decided upon through left and top.
So the left value of content in relative position is decided immediately after the content is placed; that means in relative position the content are placed one after another. In the case of relative position the left value is calculated after just the content is placed.
Let’s go deeper by this below Scenario
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 to fix positioning issues.
Let's give you a quick Example:
We have a web page where we are adding dynamic div by customizing right click option of mouse. After generating div if we set the div position as absolute then the div will render at the same place where the first div rendered and when we drag to other position then the left value of that div will be 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 in a line.
Hence in real time if we have a requirement 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 the div anywhere and do customization as we want.
Note : Above scenario is taken from Dynamic Dashboard creation and customization. If you have any doubt about the above scenario or if you have any questions feel free to ask me.
Conclusion
If we conclude, what we understand is that Position absolute means if we change the size of the div it won’t affect 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 affects all other div, but keep in mind that the all other div means that the div which is in the left side of specific div which changing it’s size.
So it’s Useful when you develop an app using JQuery Resizeable, Draggable functionality.
Without Resizing of the div you can’t get an Idea of how the relative and absolute positioning actually works.
Hope the above Explanation makes it clear to understand how position relative and absolute work.
For this above explanation, an Example of absolute and relative position with dynamic div creation is coming soon.
“This time never comes tomorrow, so live in Present and do what ever you want” But never forget to learn new things which add value to your life.”.
Keep Reading!
Read more articles on CSS: