CSS - Right Property

About

The right property is the offset from the right edge of the containing block.

It applies only if the box itself has a position value of:

  • relative
  • absolute
  • or fixed

The static position will not work. Ie the right position does not work in a normal flow positioning model

Containing Block

The containing block depends on the positioning model.

If the box position property is With the following ascendant rule The positioning model is Then the containing block is
relative The parent container has a static or relative position relative positioning the box itself after being laid out by the normal flow
absolute An ascendant container has a relative position absolute positioning the first ascendant relative box
or the viewport (ie screen) if none
fixed None fixed positioning an anchored viewport (ie screen)

Example

Absolute Positioning

In a absolute model, the containing box is the first ascendant box with a relative,absolute or fixed position.

If there is no relative ascendant box, the containing box is the viewport

  • The HTML with a paragraph to act as the absolute box with a right property.
<p class="absolute_right">This paragraph is absolute right positioned against its containing box (which is the body) and move it then to the left by 10% of the total width (of the width of the viewport in dashed blue border)</p>
  • The css with the bottom property
.absolute_right {
   position: absolute;
   right: 10%; /* 10% of the containing box (ie 10% of the viewport) */
   border:1px dashed red; /* to see the border */
   max-width:300px; /* width does not follow the content */
   margin:0; /* some browser add a top/bottom marge to a absolute box*/
}
  • The body needs also an height because an an absolute box does not participate in the height of the body and we would get a body with a height of 0px.
body {
  height:7rem; /* An absolute box does not participate in the height of the body, we need to give a little bit otherwise we see nothing */
  border:1px dashed blue; /* to see the border */
}
  • Result

Documentation / Reference


Powered by ComboStrap