Cách đặt vị trí bên phải (right) của phần tử định vị bằng JavaScript

Để đặt khoảng cách từ cạnh phải của phần tử đến cạnh phải của khối chứa gần nhất có position khác static, bạn dùng thuộc tính right trên style của phần tử. Phần tử phải có position là absolute, relative, fixed hoặc sticky thì right mới có tác dụng.

Ví dụ minh họa

Mã sau di chuyển hộp cam sang phải 70px khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 350px;
      height: 200px;
      background-color: orange;
      border: 3px solid red;
      position: absolute; /* Bắt buộc để right hoạt động */
      top: 20px; /* Cố định top để quan sát thay đổi right */
      left: auto; /* Đảm bảo left không ghi đè right */
    }
  </style>
</head>
<body>
  <p>Nhấn nút để đặt right = 70px</p>
  <button type="button" onclick="setRight()">Đặt vị trí right</button>
  <div id="box">
    <p>Đây là div. Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div. Đây là div.</p>
  </div>
  <script>
    function setRight() {
      document.getElementById("box").style.right = "70px";
    }
  </script>
</body>
</html>

Lưu ý quan trọng

• Position là bắt buộc: Nếu phần tử có position: static (mặc định), thuộc tính right sẽ bị bỏ qua.
• Xung đột left/right: Nếu cả left và right đều được đặt, left ưu tiên trong LTR, right ưu tiên trong RTL.
• Đơn vị: Chấp nhận px, %, em, rem, vw, vh, auto, v.v.
• Giá trị âm: right: -50px sẽ đẩy phần tử ra ngoài khung chứa về bên phải.

Mẹo: Dùng right: 0 để dính sát cạnh phải của container.