Open In App
Related Articles

CSS right Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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


Last Updated : 06 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads