CSS right Property
Last Updated :
06 Jun, 2023
The css right property mainly affects the horizontal position of element as well as css property has no effect on non-positioned elements.
Syntax:
right: auto|length|initial|inherit;
Property values:
- auto: This is a default property in which browser will calculate the right edge position.
Syntax:
right:auto;
Example-1:
html
<!Doctype html>
<html>
<head>
<title>
CSS | right Property
</title>
<style>
div.geek {
position: relative;
width: 300px;
height: 200px;
border: 3px solid green;
}
div.geeks {
position: absolute;
right: auto;
width: 100px;
height: 120px;
border: 3px solid green;
}
</style>
</head>
<body>
<h1>CSS right Property</h1>
<div class="geek">
Geek For Geeks(here position of element is relative)
<div class="geeks">
Geek For Geeks
(here position of element is absolute and element)
</div></div>
</body>
</html>
|
Output:
- length: Length help to set the right edge position of element in px, cm. It should always have positive value.
Syntax:
right:length;
Example-2:
html
<!Doctype html>
<html>
<head>
<title>
CSS | right Property
</title>
<style>
div.geek {
position: relative;
width: 300px;
height: 200px;
border: 3px solid green;
}
div.geeks {
position: absolute;
<!-- "length" right property>
right: 0px;
width: 100px;
height: 120px;
border: 3px solid green;
}
</style>
</head>
<body>
<h1>CSS right Property</h1>
<div class="geek">
Geek For Geeks(here position of element is relative)
<div class="geeks">
Geek For Geeks
(here position of element is absolute and element)
</div>
</div>
</body>
</html>
|
Output:
- initial: Initial keyword is used to set default value of CSS property.
Syntax:
right:initial;
Example-3:
html
<!Doctype html>
<html>
<head>
<title>
CSS | right Property
</title>
<style>
div.geek {
position: relative;
width: 300px;
height: 200px;
border: 3px solid green;
}
div.geeks {
position: absolute;
right: initial;
width: 100px;
height: 120px;
border: 3px solid green;
}
</style>
</head>
<body>
<h1>CSS right Property</h1>
<div class="geek">
Geek For Geeks(here position of element is relative)
<div class="geeks">
Geek For Geeks
(here position of element is absolute and element)
</div>
</div>
</body>
</html>
|
Output:
- inherit: Inherit keyword is also used to set default value of CSS property.Here default value is the set value of previous element.
Syntax:
right:inherit;
Example-4:
html
<!Doctype html>
<html>
<head>
<title>
CSS | right Property
</title>
<style>
div.geek {
position: relative;
width: 300px;
height: 200px;
border: 3px solid green;
}
div.geeks {
position: absolute;
<!--"inherit" right property>
right: inherit;
width: 100px;
height: 120px;
border: 3px solid green;
}
</style>
</head>
<body>
<h1>CSS right Property</h1>
<div class="geek">
Geek For Geeks(here position of element is relative)
<div class="geeks">
Geek For Geeks
(here position of element is absolute and element)
</div>
</div>
</body>
</html>
|
Output:
Supported Browsers: The supported browsers by right Property are listed below:
- Google Chrome 1.0
- Edge 12
- Firefox 1.0
- Internet Explorer 5.5
- Opera 5.0
- Safari 1.0
Share your thoughts in the comments
Please Login to comment...