CSS - Right



CSS right property controls the horizontal position of an element on a web page. It only affects elements that have been positioned using the position property. It does not affect elements that are not positioned.

The right property has different effects depending on the position of the element.

  • absolute or fixed − Specifies the distance of an element from the right of the inner border of its containing block.

  • relative − Specifies the distance the right edge of an element's shifted to the left of its starting point.

  • static − It has no effect on the position of an element.

  • Sticky − It determines the rightmost edge of the sticky-constraint rectangle.

Possible Values

  • auto − Default value. The browser will determine the right edge position of the element based on its width.

  • length − It can specify a positive, negative, or null value.

  • percentage − It can specify the percentage of the container's Width.

Applies to

All the HTML positioned elements.

DOM Syntax

object.style.right = "2px";

CSS right - With Absolute Position

The following example shows how to use the position: absolute property and right property to position an element to the right of its parent element −

<html>
<head>
<style>
   .box {  
      background-color: #f2c3ee;
      color: #1144ec;
      font-weight: bold;
   }
   .absolute-box {
      position: absolute;
      width: 130px;
      height: 60px;
      padding: 2px;
      border: 2px solid #000000;
      background-color: #bbedbb;
      color: #e50c0c;
      border-radius: 5px;  
   }
   .right {
      right: 0;
   } 
   .right-px {
      right: 60px;
   } 
   .right-per {
      right: 30%;  
   } 
   .right-em {
      right: 2em;  
   } 
      .right-auto {
      right: auto;  
   }
</style>
</head>
<body>
   <div class="box">
      <div class="absolute-box right">
         Absolute positioning with 0 right margin.
      </div>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
      <div class="absolute-box right-px">
         Absolute positioning with 60px right margin.
      </div>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
      <div class="absolute-box right-per">  
         Absolute positioning with 30% right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
      <div class="absolute-box right-em">
         Absolute positioning with 2em right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
         <div class="absolute-box right-auto">
         Absolute positioning with auto right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.
   </div>
</body>
</html>     

CSS right - With Fixed Position

The following example demonstrates how to use the position: fixed property and the right property to position an element to the right edge of the viewport and keep it in the same place even when the page is scrolled −

<html>
<head>
<style>
   .box {  
      background-color: #f2c3ee;
      color: #1144ec;
      font-weight: bold;
   }
   .fixed-box {
      position: fixed;
      width: 130px;
      height: 60px;
      padding: 2px;
      border: 2px solid #000000;
      background-color: #bbedbb;
      color: #e50c0c;
      border-radius: 5px;  
   }
   .right {
      right: 0;
   } 
   .right-px {
      right: 60px;
   } 
   .right-per {
      right: 30%;  
   } 
   .right-em {
      right: 2em;  
   } 
   .right-auto {
      right: auto;  
   }
</style>
</head>
<body>
   <div class="box">
      <div class="fixed-box right">
         Fixed positioning with 0 right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      <div class="fixed-box right-px">
         Fixed positioning with 60px right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      <div class="fixed-box right-per">  
         Fixed positioning with 30% right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      <div class="fixed-box right-em">
         Fixed positioning with 2em right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      <div class="fixed-box right-auto">  
         Fixed positioning with auto right margin.
      </div>
         Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</body>
</html>

CSS right - With Relative Position

The following example demonstrates how to use the position: relative property and the right property to move an element from the right edge to the left of its normal position −

<html>
<head>
<style>
   .box {  
      background-color: #f2c3ee;
      color: #1144ec;
      font-weight: bold;
      margin-left:10%;
   }
   .relative-box {
      position: relative;
      width: 130px;
      height: 60px;
      padding: 2px;
      border: 2px solid #000000;
      background-color: #bbedbb;
      color: #e50c0c;
      border-radius: 5px;  
   }
   .right {
      right: 0;
   } 
   .right-px {
      right: 30px;
   } 
   .right-per {
      right: 10%;  
   } 
   .right-em {
      right: 1em;  
   } 
   .right-auto {
      right: auto;  
   }
</style>
</head>
<body>
   <div class="box">
      <div class="relative-box right">
         Relative positioning with 0 right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="relative-box right-px">
         Relative positioning with 30px right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="relative-box right-per">  
         Relative positioning with 10% right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="relative-box right-em">
         Relative positioning with 1em right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="relative-box right-auto">  
         Relative positioning with auto right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
   </div>
</body>
</html>

CSS right - With Static Position

The following example demonstrates that the right property will have no effect on the positioning of an element if the position property is set to static

<html>
<head>
<style>
   .box {  
      background-color: #f2c3ee;
      color: #1144ec;
      font-weight: bold;
   }
   .static-box {
      position: static;
      width: 130px;
      height: 60px;
      padding: 2px;
      border: 2px solid #000000;
      background-color: #bbedbb;
      color: #e50c0c;
      border-radius: 5px;  
   }
   .right {
      right: 0;
   } 
   .right-px {
      right: 60px;
   } 
   .right-per {
      right: 30%;  
   } 
   .right-em {
      right: 2em;  
   } 
   .right-auto {
      right: auto;  
   }
</style>
</head>
<body>
   <div class="box">
      <div class="static-box right">
         Static positioning with 0 right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="static-box right-px">
         Static positioning with 60px right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="static-box right-per">  
         Static positioning with 30% right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="static-box right-em">
         Static positioning with 2em right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      <div class="static-box right-auto">  
         Static positioning with auto right margin.
      </div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
   </div>
</body>
</html>   

CSS right - With Sticky Position

The following example demonstrates how to use the position: sticky and right property to create an element that sticks to the viewport when the user scrolls −

<html>
<head>
<style>
   .box {  
      background-color: #f2c3ee;
      color: #1144ec;
      font-weight: bold;
      padding: 10px;
   }
   .sticky-container {
      position: relative; 
   }
   .sticky-box {
      position: sticky;
      width: 130px;
      height: 60px;
      padding: 2px;
      border: 2px solid #000000;
      background-color: #bbedbb;
      color: #e50c0c;
      border-radius: 5px;  
      top: 10px;
   }
   .right {
      right: 0;
   } 
   .right-px {
      right: 60px;
   } 
   .right-per {
      right: 30%;  
   } 
   .right-em {
      right: 2em;  
   } 
   .right-auto {
      right: auto;  
   }
</style>
</head>
<body>
   <div class="box">
      <div class="sticky-container">
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         <div class="sticky-box right">
            Sticky positioning with 0 right margin.
         </div>
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
      </div>
   </div>
</body>
</html>
Advertisements