CSS relative + right (or bottom) almost NEVER work

Question

I've been writing CSS for quite some time now.

I've noticed that

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

never works!

relative positioning would work with left and top specified but not with right/bottom. Why?

A quick fix around this is to use "absolute" instead and specify right/bottom in pixels, but I need a reason.

Also, correct me if I'm wrong. Irrespective of whether the external container is positioned absolutely or relatively, does it not make much sense to position something "relative" to the boundaries of that container or should elements inside a container always be positioned "absolute"?

Thank you.

Harrisharrisburg

When you say that this feature "doesn't work", what exactly do you mean? There are a lot of different meanings for this. To help get your problem understood by other users, try adding some code or a jsFiddle to help. – Foretooth

Answer 1

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.

Tyche

So right:40px; is pretty much the same as margin-left:-40px; in that case then? That's just bizarre... – Zoara

The difference there, @TomAuger is the position property that would have to be assigned to the parent element in order to affect that change. Think of it in terms of push vs pull: right:40px; would mean the element parent would need position:relative; and the element would be pushed 40 px to the left of the normal right bounding edge. However, if the box model collapses this may not give the intended display rendering. Instead margin-left:-40px; pulls the element from the left bounding edge and the parent element can retain its default position:static; property. – Tyche

Answer 2

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).

Armandarmanda

Answer 3

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> 

Vin

Answer 4

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)

Lentissimo

Answer 5

To people visiting this old post... if the element that you are trying to position inside something else has a width or height that is larger than the outer element. The position will ignore left, right, bottom, left.

give it width/height auto.

that was the problem that I had. Hope it helps you too!

Sharyl

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Maverick

Answer 6

remove position left, right, top, bottom from the parents element and put it in the child as you want

.parent_class
{
    background: #ff0000 ;
    position: absolute;
    transition: 0.8s ease-out;
    left:0;   //" remove this from here"
    top:0;   // " remove this from here"
    z-index: -1;
}

.child_class
{   
    width: 0px;
    height: 70px;
    right: 0; //"now it will work"
    bottom: 0;//"now it will work"
}

Italicize

Answer 7

What's the default value of left property? It's 0, right? Your solution isn't working because left: 0 is interfering. Add left: auto to your css.

Neace

The default value of left is auto. – Esse