CODEWITHSUNDEEP
htmlcss
Chapsterj
Chapsterj

Reputation: 6625

position relative and right property

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?

Upvotes: 17

Views: 42649

Answers (3)

George
George

Reputation: 333

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

Upvotes: 19

Quentin
Quentin

Reputation: 943579

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.

Upvotes: 1

Willem Van Bockstal
Willem Van Bockstal

Reputation: 2263

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/

Upvotes: 25

Related Questions