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
Articles Related
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