The right CSS property is used to set the horizontal position of an element relative to its containing parent or positioned ancestor. It specifies the distance between the right edge of the element and the right edge of its containing parent or the right edge of the viewport if the element is positioned absolutely.
The right property accepts various values, including length units (such as pixels or percentages), keywords, or the auto keyword.
Here’s an example:
.box {
position: absolute;
right: 20px;
}
In this example, the .box class is positioned absolutely using position: absolute;. The right: 20px; rule sets the element’s right edge 20 pixels away from the right edge of its containing parent. This will shift the element towards the right side of the parent.
You can use negative values to position the element relative to the right edge of its containing parent in the opposite direction. For example:
.box {
position: relative;
right: -10px;
}
In this example, the .box class is positioned relatively using position: relative;. The right: -10px; rule shifts the element 10 pixels to the left, creating an overlap with its adjacent sibling element.
The right property is commonly used in conjunction with other positioning properties, such as position, top, and left, to precisely position elements within a layout. It allows you to control the horizontal position of elements, enabling flexible and dynamic designs.