CSS right Property
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; <!-- "auto" right property--> 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; <!--"initial" right property--> 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
Please Login to comment...