right aligns the right side of an absolute element to the right side of its container and offsets it by a positive or negative value. : right « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. right

right aligns the right side of an absolute element to the right side of its container and offsets it by a positive or negative value.

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* .container {
  position: relative;
}

* .box {
  position: absolute;
  overflow: auto;
  visibility: visible;
  z-index: 1;
  right: 300px;
  top: 0;
  bottom: auto;
  width: 220px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  background: red;
}

* .before {
    z-index: 2;
  width: 100px;
  height: 400px;
  left: 400px;
  right: auto;
  top: 100px;
  bottom: auto;
    background: yellow;
}

</style>
</head>
<body>


<div class="container"> 
    <div>BEFORE</div> 
    <div class="before">ABSOLUTE BEFORE</div> 
    <div class="box">this is a test. this is a test. </div> 

</div> 
</body>

</html>








Related examples in the same category

1.'right' Example
2.Use 'right' to offset the right side of an element from the right side of its reference position.
3.This element is offset from its original position to the right
4.width is a value, left is a value, and right is auto
5.width is a value, left is auto, and right is a value
6.Absolute Outside and Top Left positioned with 100% right
7.Top-right Absolute positioned element