CSS `right` Property: Horizontal Element Positioning and Layout Control

Master precise horizontal element positioning in your CSS layouts using the `right` property. This tutorial explains how `right` positions elements relative to their containers, clarifies its interaction with the `position` property (relative, absolute, fixed, sticky), and provides examples for creating effective and responsive web designs.

Horizontal Positioning with CSS `right` Property

Understanding the `right` Property

The CSS `right` property positions an element relative to the right edge of its containing element. Like the `left` property, it only works on positioned elements (elements with a `position` value other than `static`). The precise effect of `right` depends on the element's `position` value (relative, absolute, fixed, or sticky).

`right` Property Syntax and Values

The syntax is:

right: auto | | | initial | inherit;

Here's a breakdown of the possible values:

• auto (default): The browser automatically determines the right position.
• (e.g., `10px`, `2em`, `1cm`): Sets the horizontal distance from the right edge of the containing element, in the specified unit. Negative values are allowed.
• (e.g., `50%`): Sets the distance as a percentage of the containing element's width. Negative values are allowed.
• initial: Resets the property to its default value (auto).
• inherit: Inherits the `right` value from its parent element.

`right` and Positioning Contexts

The behavior of `right` differs depending on the element's `position`:

• `position: absolute;` or `position: fixed;`: `right` sets the distance between the element's right edge and the right edge of its containing block (the nearest ancestor with a position other than `static`).
• `position: relative;`: `right` moves the element horizontally relative to its normal position. A positive value moves it to the left; a negative value moves it to the right.
• `position: sticky;`: Similar to `left`, behavior depends on the scroll position. Inside the viewport, it acts like `relative`; outside the viewport, it acts like `fixed`.

If both `left` and `right` are specified, the browser prioritizes `right` in right-to-left contexts and `left` in left-to-right contexts.

Examples of `right`

These examples illustrate the use of `right` with absolute and relative positioning. You would need to include the corresponding HTML elements and CSS for these to work. The examples below are illustrative and show expected visual results, not the full code.

Example 1: Absolutely Positioned Elements

This demonstrates `right` with absolutely positioned elements. Note that `right: auto;` and `right: initial;` would likely overlap due to their default behavior and identical dimensions.

Example 2: Relatively Positioned Elements

This shows `right` with relatively positioned elements, demonstrating how negative values shift the element to the right of its normal position.