Absolute position means the position of the content always starts from the Initial position. Here initial position means where the first content renders 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 were the first div renders from that means over the top of first div second div render; rather than coming from the left side of the first div.
The position of the content means how many pixels the content is from left and top; so whatever position the CSS attribute you may set, i.e relative or absolute, at that time left and the top comes into 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 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 the left value of content in relative position is decided immediately after the content is placed; that means in relative position the content is placed one after another. In the case of a 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 is 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 an absolute position that the position of content is basically decided upon through the 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 is placed one after another. In the case of a 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 to resize 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 the right-click option of the 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 anywhere 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 is not affected by any other div, we can put the div anywhere and do customization as we want.
Note: The 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 on the left side of specific div which changing its size. So it’s Useful when you develop an app using JQuery Resizable, Draggable functionality. Without Resizing of the div, you can’t get an idea of how the relative and absolute positioning actually works. I hope the above explanation makes it clear to understand how to 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 whatever you want” But never forget to learn new things which add value to your life.”.