Thuộc tính position của Style trong HTML DOM

Thuộc tính style.position trong HTML DOM dùng để **lấy hoặc đặt** phương thức định vị (positioning method) của một phần tử HTML. Giá trị này quyết định cách phần tử được bố trí trong luồng tài liệu (document flow) và cách các thuộc tính top, right, bottom, left, z-index tác động.

Cú pháp

// Lấy giá trị
var pos = element.style.position;

// Đặt giá trị
element.style.position = "relative"; // "absolute", "fixed", "sticky", "static", "inherit", "initial"

Các giá trị position

Giá trị	Hành vi	Điểm móc (offset parent)
`static` (mặc định)	Trong luồng bình thường, bỏ qua top/right/bottom/left/z-index	—
`relative`	Trong luồng, nhưng có thể dịch chuyển bằng top/right/bottom/left (không ảnh hưởng các phần tử khác)	Vị trí gốc của chính nó
`absolute`	Rời khỏi luồng, định vị so với ancestor gần nhất có position != static	Nearest positioned ancestor
`fixed`	Rời khỏi luồng, định vị so với viewport (cửa sổ trình duyệt), không cuộn theo trang	Viewport
`sticky`	Kết hợp `relative` + `fixed`: cuộn bình thường đến ngưỡng thì dính (dựa trên top/right/bottom/left)	Nearest scrolling ancestor + viewport
`inherit`	Kế thừa từ cha	—
`initial`	Trở về `static`	—

Ví dụ: Chuyển sang fixed positioning

<!DOCTYPE html>
<html>
<style>
  body { color: #000; height: 200vh; } /* Cao gấp 2 viewport để test cuộn */
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem 0; }
  .box {
    width: 100px; height: 100px; background: #db133a6b;
    top: 150px; left: 50%; /* Chỉ hoạt động khi position != static */
  }

<body>
  <h1>Demo: style.position</h1>
  <p>Cuộn trang để thấy hiệu ứng fixed</p>
  <div class="box" id="box"></div>
  <button onclick="setFixed()" class="btn">Đặt position: fixed</button>
  <script>
    function setFixed() {
      document.getElementById('box').style.position = "fixed";
      // Box giờ dính vị trí top:150px, left:50% so với màn hình, không cuộn
    }
  </script>
</body>
</html>

Kết quả:

Ban đầu: Box ở giữa trang (position mặc định static, top/left bị bỏ qua — thực tế ví dụ cần set position:relative trước).
Sau nhấn nút: Box chuyển sang fixed, cố định tại top:150px, left:50% so với màn hình, **không di chuyển khi cuộn trang**.

Lưu ý quan trọng

element.style.position chỉ đọc/ghi **inline style**. Dùng getComputedStyle(el).position để đọc giá trị thực (kể cả từ CSS class).
Thay đổi position động có thể gây layout shift — cần test kỹ.
sticky cần ít nhất một trong top/right/bottom/left được set mới hoạt động.
z-index chỉ hoạt động khi position != static.

So sánh nhanh

relative: "Nơi đây nhưng cho phép nudge một chút".
absolute: "Rời khỏi dòng chảy, theo cha gần nhất có position".
fixed: "Ghim vào màn hình, bất chấp cuộn".
sticky: "Cuộn bình thường, đến mép thì dính lại".