right

Overview

The right property defines the horizontal positioning of an element. However, it only works for positioned elements and does not impact non-positioned ones.

Crucially, its behavior varies depending on the value of the position property of the element:

• For absolute or fixed positioned elements, right defines the gap between the element's right edge and its containing block's right inner border.

• For relative positioned elements, right defines how much the element's right edge is shifted left from its normal position.

• For sticky positioned elements, right is involved in the calculation of the sticky-constraint rectangle which refers to the bounding area within which the element can "stick" or remain fixed while scrolling.

• For static positioned elements, right has no effect.

Examples and Usage

Below, we'll examine the use of the right property on an element positioned inside a parent container and another element positioned in relation to the document body. With this, we'll demonstrate the different behaviors of the property based on the positioning context.

HTML Structure

<div class="rectangleA">
  <div class="rectangleB"></div>
</div>

<div class="rectangleC"></div>

CSS Styling

.rectangleA {
  position: relative; /* Parent container with relative positioning */
  width: 400px;
  height: 200px;
  background-color: #cd3333;
  border: 1px solid black;
}

.rectangleB {
  position: absolute; /* Child element with absolute positioning */
  right: 40px; /* Positioned 40px from the right edge of the parent container */
  top: 20px;
  width: 150px;
  height: 75px;
  background-color: #fbbf24;
  border: 1px solid black;
}

.rectangleC {
  position: absolute; /* Positioned with respect to the document body */
  right: 200px; /* Positioned 200px from the right edge of the body */
  width: 150px;
  height: 75px;
  background-color: #11acea;
  border: 1px solid black;
}

In the CSS setup, .rectangleB is a child of .rectangleA and is set to position: absolute with a right value of 40px. This places .rectangleB exactly 40px to the left of the right edge of .rectangleA, demonstrating how the property operates with absolute positioning within a relative container.

On the other hand, .rectangleC is positioned absolutely relative to the viewport, or in other words, the entire document body. When right is set to 200px, it positions .rectangleC such that its right edge is 200px away from the right edge of the viewport.

In addition, the right property works in conjunction with other positioning properties, such as top, bottom, and left. These properties can be set in the inset shorthand. There are also logical shorthands, such as inset-block and inset-inline, which position an element in terms of its block and inline dimensions respectively.

Values

Associated Properties

• top
• bottom
• left
• inset
• inset-inline
• inset-inline-start
• inset-block
• inset-block-start
• inset-block-end
• position

Tips and Tricks

• When both left and right are set, an element may resize to satisfy both values, unless constrained by other properties like width. In an over-constrained situation, left has precedence in left-to-right containers, and right has precedence in right-to-left containers.

• Beware of using extreme values for right with position: fixed, as they can push the element off-screen, making it inaccessible to users.

• Remember, the right property does not affect static elements. Consider this when troubleshooting layout issues.

Browser Compatibility

For a more detailed breakdown, refer to the first link in the Useful Resources below.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: right

W3C's Editor's Draft of CSS Positioned Layout Module Level 3: Box Insets