CSS relative + right (or bottom) almost NEVER work

Relative positioning does work with bottom/right values, just not the way you were expecting:

http://cssdesk.com/RX24j

Think about the position values on relative elements as margins, that the surrounding elements simply ignore. The "margins" will always move the element relative to it's previous position in the normal document flow, but remove it from the normal flow at the same time.

When out of the normal document flow, the surrounding elements act as if it were in it's original position in the normal flow... but it's not. This is why a relative element can overlap it's parent (like in Rel 1).


not recommended :

left : 0%   //will set it to left 
left : 100% //will set it to right => you need to get the width of the element and subtract it using calc ( 100% - width)

Did you try this?

<div style="position: relative; right: -20%; bottom: -20%;">some text</div> 

or rather

<div style="position: relative; right: -80%; bottom: -80%;">some text</div> 

From Absolute vs. Relative - Explaining CSS Positioning

Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.