The CSS right property is a fundamental part of CSS positioning that works in conjunction with the position property. It defines the horizontal offset of a positioned element from the right edge of its containing block. For the right property to have any effect, the element's position property must be set to relative, absolute, fixed, or sticky.
Example 1: Basic right with absolute positioning
.container {
position: relative; /* Establishes a positioning context for the child */
width: 300px;
height: 200px;
border: 2px solid black;
}
.box {
position: absolute; /* Positions the element relative to the nearest positioned ancestor */
right: 20px; /* Moves the element 20px from the right edge of the container */
width: 100px;
height: 100px;
background-color: lightblue;
}
Explanation
The .box element is positioned absolutely within its relatively positioned parent, .container. The right: 20px; declaration pushes the blue box 20 pixels away from the right-hand side of the black-bordered container.
Example 2: right with relative positioning
.box-relative {
position: relative; /* Allows the element to be offset from its normal position */
right: 30px; /* Shifts the element 30px to the left of where it would normally be */
width: 100px;
height: 100px;
background-color: lightcoral;
}
Explanation
Here, position: relative; is used. The right: 30px; rule moves the red box 30 pixels to the left from its original position in the normal document flow, creating an offset.
Example 3: right with fixed positioning
.box-fixed {
position: fixed; /* Positions the element relative to the viewport */
right: 10px; /* Places the element 10px from the right edge of the browser window */
top: 10px;
width: 120px;
padding: 10px;
background-color: lightgreen;
}
Explanation
With position: fixed;, the element is positioned relative to the browser window, or viewport. right: 10px; anchors the green box 10 pixels from the right edge of the screen, and it will stay there even when the page is scrolled.
Example 4: Negative right value
.container {
position: relative;
width: 300px;
height: 200px;
border: 2px solid black;
overflow: hidden; /* Hides content that extends beyond the container's bounds */
}
.box-negative {
position: absolute;
right: -25px; /* Moves the element 25px outside the right edge of the container */
width: 100px;
height: 100px;
background-color: gold;
}
Explanation
A negative value for right pushes the element outside of its containing block's right boundary. In this case, the gold box is moved 25 pixels to the right of the container's right edge, making part of it invisible due to overflow: hidden;.
Example 5: right with percentage values
.container {
position: relative;
width: 400px;
height: 200px;
border: 2px solid black;
}
.box-percent {
position: absolute;
right: 10%; /* Positions the element 10% of the container's width from the right */
width: 50%;
height: 80px;
background-color: mediumpurple;
}
Explanation
Percentage values for right are calculated based on the width of the containing block. The purple box is positioned so that its right edge is 10% of the container's width away from the container's right edge.
Example 6: right transitioning on hover
.box-transition {
position: relative;
right: 0;
width: 100px;
height: 100px;
background-color: orange;
transition: right 0.5s ease-in-out; /* Smoothly animates the 'right' property */
}
.box-transition:hover {
right: 50px; /* Moves the element on hover */
}
Explanation
This example demonstrates animating the right property. When the user hovers over the orange box, it smoothly transitions 50 pixels to the left over half a second, creating a simple and effective interactive effect.
Example 7: right with calc() function
.container {
position: relative;
width: 100%;
height: 150px;
border: 2px solid black;
}
.box-calc {
position: absolute;
right: calc(10% + 20px); /* Calculates the right offset dynamically */
width: 150px;
height: 75px;
background-color: skyblue;
}
Explanation
The calc() function allows for mathematical calculations to determine a property's value. Here, the right position is dynamically calculated to be 10% of the container's width plus an additional 20 pixels, offering more flexible and responsive layouts.