CSS Properties Index   Positioning Properties

---

Sets or retrieves the right position of an object.

CSS	{ right: auto | length | percentage }
Script	object.style.right = auto | length | percentage

auto	Default position according to the HTML layout of the page.
length	Floating-point number and a valid CSS length unit: either an absolute units designator ( cm, mm, in, pt, pc, or px ) or a relative units designator ( em or ex ).
percentage	Value expressed as a percentage of the parent object’s height.

The property is read/write with a default value of auto; this attribute is not inherited.

The right property participates in specifying the horizontal position of a positioned element.

The effect of right depends on how the element is positioned ( the value set for the position property )

• When position is set to absolute or fixed, the right property specifies the distance between the outer edge of the element’s right margin and the inner border of the containing block’s right edge.
• When position is set to relative, the right property specifies the distance the element’s right edge is moved. A positive value moves it to the left. A negative value moves it to the right.
• When position is set to sticky, the right property is used to compute the sticky-constraint rectangle.
• When position is set to static, the right property has no effect.

Its returned value corresponds to the offsetRight property of the object and does not include the border of the parent object.

When scripting the right property, use either the pixelRight or posRight property for numeric manipulation of a right value.

For more information about how to access the dimension and location of objects on the page through the document object model, see Measuring Element Dimension and Location.

The sample below uses inline event handlers to dynamically change an object’s right position in response to mouse events. A transition is applied to illustrate the change in position.

<img id="img" src="../shared/images/someImage.jpg"
   style="position: relative; right: 400px"
   onclick="this.style.right='-400px'"
   ondblclick="this.style.right='0px'">

 Show me 

bottom, left, top, pixelRight, posRight