Thuộc tính right trong CSS - Định vị ngang

Thuộc tính right được dùng để thiết lập vị trí ngang của phần tử. Các giá trị:

right: auto | length | initial | inherit;

Ví dụ 1: right với position absolute

<!DOCTYPE html>
<html>
<head>
<style>
div {
  text-align: justify;
  text-justify: inter-word;
  color: white;
  background-color: orange;
  position: absolute;
  right: 90px;
}
</style>
</head>
<body>
<h2>Tiêu đề Demo</h2>
<div>Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo.</div>
</body>
</html>

Kết quả

Ví dụ 2: right với position relative

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  background-color: orange;
  width: 100px;
  position: relative;
  right: 0px;
  color: white;
}
</style>
</head>
<body>
<h1>Chi tiết</h1>
<div class="demo">Trung tâm thi gần trường ABC College.</div>
<div class="demo2">Kỳ thi bắt đầu lúc 11AM.</div>
</body>
</html>

Kết quả

Ví dụ 3: Giá trị âm

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
  background-color: orange;
  width: 100px;
  position: relative;
  right: -100px;
  color: white;
}
</style>
</head>
<body>
<h1>Chi tiết</h1>
<div class="demo">Trung tâm thi gần trường ABC College.</div>
<div class="demo2">Kỳ thi bắt đầu lúc 11AM.</div>
</body>
</html>

Kết quả

Lưu ý quan trọng:

• right chỉ hoạt động khi position không phải static (mặc định)
• Với absolute: so với chứa có position gần nhất
• Với relative: dịch chuyển từ vị trí gốc
• Với fixed: so với viewport
• Giá trị âm đẩy phần tử sang phải (ngược với left)