CSS right Property

Read

Discuss

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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 06 Jun, 2023

CSS resize Property

CSS scroll-behavior Property

CSS right Property

html

html

html

html

Please Login to comment...