Cách đặt vị trí dưới (bottom) của phần tử định vị bằng JavaScript

Thuộc tính bottom xác định khoảng cách từ cạnh dưới của phần tử đến cạnh dưới của khối chứa định vị. Phần tử **phải có position != static** (absolute, relative, fixed, sticky).

Ví dụ minh họa

Mã sau đặt bottom = 400px cho nút bấm (vị trí absolute) khi tự click vào chính nó:

<!DOCTYPE html>
<html>
<head>
  <style>
    #newBtn {
      position: absolute; /* BẮT BUỘC */
    }
  </style>
</head>
<body>
  <button type="button" id="newBtn" onclick="setBottomPosition()">Đặt Bottom Position</button>
  <script>
    function setBottomPosition() {
      document.getElementById("newBtn").style.bottom = "400px";
      /* Nút sẽ di chuyển đến vị trí cách bottom của viewport/ancestor 400px */
    }
  </script>
</body>
</html>

Lưu ý quan trọng

• Position bắt buộc: static (mặc định) → bottom bị bỏ qua.
• Xung đột top/bottom: Nếu cả hai đều set, top ưu tiên (LTR).
• Giá trị âm: bottom: -50px đẩy phần tử ra ngoài container về phía dưới.
• Đơn vị: px, %, em, rem, vh, vw, auto.

So sánh top/right/bottom/left