Is It Possible To Use Position Relative More Than Once In The Same Html Page?

I am using 'position relative' and 'position absolute' on my master page. I have a page that use the above master page, And I am trying to use in this page the 'Position relative'

Solution 1:

When one uses position: absolute it is calculated based on the ancestor, not sibling, so your .two and .four divs are positioned relatively to the body, not .one and .two, use this instead:

<divclass="one"><divclass="two"></div></div><divclass="three"><divclass="four"></div></div>

Solution 2:

Your black and green divs are occupying the exact same position, with the black one on top of the green one.

You need a better understanding of absolute and relative positioning.

Very simplistically, absolute takes the element out of the flow, and sticks it at the top left corner of the current div. (In fact, this is essentially correct but a little too simplistic. See the first referred article for an excellent explanation -- but what I wrote is basically correct for now.)

relative starts with the element in its normal position in the flow, but allows you to reposition the element up/down left/right of where it began.

float:left and float:right take the element out of the normal flow, but leave it at the left margin.

Here is a jsFiddle

All I changed was for the black div -- I changed top:0 to top:200px

Further Reading:

http://www.webdevbydoing.com/css/whats-the-difference-between-static-relative-absolute-and-fixed-positioning/

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/