Before really moving towards positioning, let’s check out the following two examples:

Note: Assume outer box as browser and inner box as DIVs.

Code for figure 1

Code for figure 2

Now if we look at the codes of both the examples then the only difference is of
position: relative;
And
position: absolute;

As in both examples, top is Zero (0), so both DIVs should start from touching the boundary of browser but it happens in only first where the position is absolute but in second there is a distance from the boundary of browser where the top is defined as Zero. This is actually the default browser margin.

And this varies from browser to browser so before making any calculation for DIV first of all we have to come out from this problem as it makes calculation differences in different browsers and luckily I got a real helpful code.

The CSS code is given below:

*{margin:0;}

Put this line on your CSS file and you come out from the above problem. Try viewing the result after putting this line in above given codes and you will come to know that now both DIV start touching the top boundary of the browser.

Now let’s understand some positioning concepts.

Look at the following figure carefully

Code for figure

Let’s first see the order of DIV in HTML. First one is “firstRel” followed by “absolute”, “secondRel”, and “thirdRel”.

Following points must be kept in mind before proceeding for the calculation.

1. position:relative is relative to browser if it is first one or relative to previous DIV if it is second, third or nth DIV.

2. position:absolute is always relative to browser even it is second, third or nth DIV but it changes accordingly if the case is of nested DIVs.

Now their positioning calculations:

1. firstRel

When we are talking about first relative DIV then the calculation always begins relative to the browser.

top: 0;
left:100;

So the “firstRel” DIV top starts touching the top boundary of browser and it is 100 units away from left boundary of browser.

2. absolute

This DIV is absolute so its calculation begins with respect to browser even if it is placed at second position.

top: 50;
left: 275;

So the absolute DIV top starts below 50 units from the top boundary of browser and it is 275 units away from left boundary of browser.

3. secondRel

Now this is the second relative DIV so its calculation takes relation with the first relative DIV i.e. “firstRel”.

top: -50;
left:25;

Now I induced a formula for the real understanding of exact distance of second DIV top corner from the first DIV top corner.

But as we have come over the browser margin problem so we can leave this element.

Now the formulae become:

Now look for the calculation in our example.

Distance from “firstRel” DIV top corner
= “secondRel” DIV top + “firstRel” DIV height - “firstRel” DIV top.
= -50 + 100 - 0
= 50

So the vertical distance from “firstRel” to secondRel is 50 units. And the calculation of “Left” is taken from the boundary of browser as the normal flow of DIV is from top to bottom.

4. thirdRel
I have added this DIV just to generalize the formulae for n^th and n-1^th DIVs.

top: -75;
left:150;

Distance from “secondRel” DIV top corner
= “thirdRel” DIV top + “secondRel” DIV height - “secondRel” DIV top.
= -75 + 100 - (-50)
= 75

So the vertical distance from secondRel to “thirdRel” is 75 units. And the calculation of “Left” is taken from the boundary of browser, as the normal flow of DIV is from top to bottom.

Now if the case arises where we have the same situation of relative DIVs but it has “float: left” property then the flow of DIVs is from Left to Right and hence there is no need to calculate vertical distance. It will be calculated from the boundary of the browser but the induced formula changes for the calculation of real horizontal distance which is below.