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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

  • initial: Initial keyword is used to set default value of CSS property.

    Syntax:

    right:initial;

    Example-3:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    Supported Browsers: The supported browsers by right Property are listed below:

    • Google Chrome 1.0
    • Edge 5.5
    • Firefox 1.0
    • Opera 5.0
    • Safari 1.0


    My Personal Notes arrow_drop_up


    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.