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...