position relative and right property

Question

I always thought by setting the div to relative and right 0 would position the div all the way to the right, if its parent was 100% width. Apparently I'm wrong and only absolute works like that. So is there no way to make it work with relative?

Answer 1

You have to set the parent to be relative, and it's child to absolute positioning.

.parent{
  position: relative;
  width: 100%;
}
.right{
  position: absolute;
  width: 200px;
  height: 200px;
  background: red;
  top:0;
  right:0;
}

​ Like here: http://jsfiddle.net/willemvb/n9Vrv/

Answer 2

There's a way to make it work to a relative.

One way is first to set the parent of the display to inline-flex.

Next, set the element (child) position:relative; margin-left:auto; right:0;.

Answer 3

So is there no way to make it work with relative?

Correct. Relative positioning is the position offset from where it would be with static positioning.

You need absolute positioning to position with respect to the edges of the containing block.