CSS right property
CSS is all about presentation. Discover how CSS right property works to transform plain HTML into a premium user experience in the guide below.
This CSS attribute defines the horizontal positioning adjustment on the right side for positioned elements, without impacting non-positioned elements. It is part of a group of four offset properties that include left, top, and bottom adjustments.
When both the left and right properties are specified, the right value takes precedence in right-to-left containers, while the left value takes precedence in left-to-right containers.
The impact of this characteristic is determined by the positioning of the associated element, specifically by the setting of the position property. The right property remains unaffected when the position property is configured as static.
The effects of this property on positioned elements other than the value static are listed as follows:
- When the element is absolutely or fixed positioned (i.e., position: absolute; and position: fixed; ), the right property specifies the distance between the element's right edge and the right edge of its containing block (ancestor to which the element is relatively positioned).
- If the element is relatively positioned (i.e., position: relative; ), the right property sets the element's right edge to the left/right from its normal position.
- If the position is set to sticky, e., position: sticky; then, the positioning context is the viewport. When the element is inside the viewport, the right property behaves like its position is relative. When the element is outside, then the right property behaves like its position is fixed.
Syntax
left: auto | length | percentage | initial | inherit;
Property Values
The values for this attribute are specified in the following manner:
auto: This serves as the default setting, enabling the browser to determine the precise position of the right edge.
The length attribute specifies the location of the right attribute in pixels, centimeters, points, and other units, permitting the use of negative values.
percentage: This parameter specifies the location of the right attribute as a percentage relative to the container block's width. This measurement is based on the width of the element's containing block and can accept negative values as well.
It assigns the property to its original default value.
Acquire: It acquires the property from its parent element.
Example
In this instance, there are four div elements positioned absolutely using the CSS property position: absolute;. The application of the right property is being demonstrated on these elements. When the div elements have right: initial; and right: auto; assigned to them, they may overlap due to sharing default values and comparable dimensions.
<!DOCTYPE html>
<html>
<head>
<title>
CSS right Property
</title>
<style>
div{
position: absolute;
width: 200px;
height: 100px;
font-size: 40px;
}
#len {
right: 200px;
border: 5px solid lightgreen;
}
#per {
right: 50%;
border: 5px solid blue;
}
#auto {
right: auto;
border: 10px solid red;
}
#init {
right: initial;
border: 5px solid yellow;
}
</style>
</head>
<body>
<h1> Example of the right Property </h1>
<div id = "len"> right: 200px; </div>
<div id = "per"> right: 50%; </div>
<div id = "auto"> right: auto; </div>
<div id = "init"> right: initial; </div>
</body>
</html>
Output
Example
In this instance, there are four div elements positioned relatively (i.e., position: relative; ). The CSS right property is being implemented on these elements. Specifically, negative values of length and percentage are being utilized on two of the div elements.
<!DOCTYPE html>
<html>
<head>
<title>
CSS right Property
</title>
<style>
div{
position: relative;
width: 250px;
height: 100px;
font-size: 40px;
}
#len {
right: -100px;
border: 5px solid lightgreen;
}
#per {
right: -30%;
border: 5px solid blue;
}
#auto {
right: auto;
border: 5px solid red;
}
#init {
right: initial;
border: 5px solid lightblue;
}
</style>
</head>
<body>
<h1> Example of the right Property </h1>
<div id = "len"> right: -100px; </div>
<div id = "per"> right: -30%; </div>
<div id = "auto"> right: auto; </div>
<div id = "init"> right: initial; </div>
</body>
</html>
Output
