right

Try it

right: 0;

right: 4em;

right: 10%;

right: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">I am absolutely positioned.</div>
    <p>
      As much mud in the streets as if the waters had but newly retired from the
      face of the earth, and it would not be wonderful to meet a Megalosaurus,
      forty feet long or so, waddling like an elephantine lizard up Holborn
      Hill.
    </p>
  </div>
</section>

.example-container {
  border: 0.75em solid;
  padding: 0.75em;
  text-align: left;
  position: relative;
  width: 100%;
  min-height: 200px;
}

#example-element {
  background-color: #264653;
  border: 4px solid #ffb500;
  color: white;
  position: absolute;
  width: 140px;
  height: 60px;
}

Cú pháp

/* Giá trị <length> */
right: 3px;
right: 2.4em;
right: anchor(--my-anchor 50%);
right: anchor-size(--my-anchor height, 65px);

/* <percentage> theo chiều rộng của khối chứa */
right: 10%;

/* Giá trị từ khóa */
right: auto;

/* Giá trị toàn cục */
right: inherit;
right: initial;
right: revert;
right: revert-layer;
right: unset;

Giá trị

<length>

Một <length> âm, không hoặc dương:

• với phần tử định vị tuyệt đối, đại diện cho khoảng cách đến cạnh phải của khối chứa.
• với phần tử định vị neo (anchor-positioned), hàm anchor() phân giải thành giá trị <length> tương đối so với vị trí cạnh trái hoặc phải của phần tử neo liên kết (xem Using inset properties with anchor() function values), và hàm anchor-size() phân giải thành giá trị <length> tương đối so với chiều rộng hoặc chiều cao của phần tử neo liên kết (xem Setting element position based on anchor size).
• với phần tử định vị tương đối, đại diện cho khoảng cách phần tử dịch chuyển sang trái so với vị trí bình thường của nó.

<percentage>

Một <percentage> theo chiều rộng của khối chứa.

auto

Chỉ định rằng:

• với phần tử định vị tuyệt đối, vị trí của phần tử dựa trên thuộc tính left, còn width: auto được coi là chiều rộng dựa trên nội dung; hoặc nếu left cũng là auto, phần tử được đặt ở vị trí ngang mà nó sẽ ở nếu là phần tử tĩnh.
• với phần tử định vị tương đối, khoảng cách của phần tử từ vị trí bình thường dựa trên thuộc tính left; hoặc nếu left cũng là auto, phần tử không dịch chuyển theo chiều ngang.

Mô tả

Tác động của right phụ thuộc vào cách phần tử được định vị (tức là giá trị của thuộc tính position):

• Khi position được đặt thành absolute hoặc fixed, thuộc tính right xác định khoảng cách giữa outer margin của cạnh phải phần tử và inner border của cạnh phải khối chứa. Nếu phần tử được định vị có phần tử neo liên kết và giá trị thuộc tính bao gồm hàm anchor(), right định vị cạnh phải của phần tử tương đối so với cạnh <anchor-side> đã chỉ định. Thuộc tính right tương thích với các giá trị left, right, start, end, self-start, self-end, center, và <percentage>.
• Khi position được đặt thành relative, thuộc tính right xác định khoảng cách cạnh phải của phần tử dịch chuyển sang trái so với vị trí bình thường.
• Khi position được đặt thành sticky, thuộc tính right được dùng để tính toán hình chữ nhật ràng buộc sticky.
• Khi position được đặt thành static, thuộc tính right không có tác dụng.

Khi cả left và right đều được khai báo, nếu không bị ngăn cản bởi các thuộc tính khác, phần tử sẽ giãn ra để thỏa mãn cả hai. Nếu phần tử không thể giãn để thỏa mãn cả hai — ví dụ nếu width đã được khai báo — vị trí của phần tử bị over-constrained. Trong trường hợp này, giá trị left có ưu tiên khi container là left-to-right; giá trị right có ưu tiên khi container là right-to-left.

Định nghĩa hình thức

Cú pháp hình thức

right = 
  auto                 |
  <length-percentage>  |
  <anchor()>           |
  <anchor-size()>      

<length-percentage> = 
  <length>      |
  <percentage>  

<anchor()> = 
  anchor( <anchor-name>?                  &&
  <anchor-side> , <length-percentage>? )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<anchor-name> = 
  <dashed-ident>  

<anchor-side> = 
  inside        |
  outside       |
  top           |
  left          |
  right         |
  bottom        |
  start         |
  end           |
  self-start    |
  self-end      |
  <percentage>  |
  center        

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

Ví dụ

Định vị tuyệt đối và tương đối sử dụng right

HTML

<div id="relative">Relatively positioned</div>
<div id="absolute">Absolutely positioned</div>

CSS

#relative {
  width: 100px;
  height: 100px;
  background-color: #ffc7e4;
  position: relative;
  top: 20px;
  left: 20px;
}

#absolute {
  width: 100px;
  height: 100px;
  background-color: #ffd7c2;
  position: absolute;
  bottom: 10px;
  right: 20px;
}

Kết quả

Khai báo cả left và right

Khi cả left và right đều được khai báo, phần tử sẽ giãn ra để thỏa mãn cả hai, trừ khi các ràng buộc khác ngăn cản. Khi vị trí của phần tử bị overspecified, thứ tự ưu tiên dựa trên hướng của container: left sẽ có ưu tiên nếu container là left-to-right. right sẽ có ưu tiên nếu container là right-to-left.

HTML

<div id="parent">
  Parent
  <div id="noWidth">No width</div>
  <div id="width">width: 100px</div>
</div>

CSS

div {
  outline: 1px solid #cccccc;
}
#parent {
  width: 200px;
  height: 200px;
  background-color: #ffc7e4;
  position: relative;
}
/* khai báo cả left và right */
#width,
#noWidth {
  background-color: #c2ffd7;
  position: absolute;
  left: 0;
  right: 0;
}
/* khai báo width */
#width {
  width: 100px;
  top: 60px;
}

Kết quả

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• top, bottom, và left
• Shorthand inset
• inset-block-start, inset-block-end, inset-inline-start, và inset-inline-end
• Shorthand inset-block và inset-inline
• position
• Module CSS positioned layout