Cách đặt phương thức định vị (position) của phần tử bằng JavaScript

Thuộc tính position xác định cách một phần tử được định vị trong luồng tài liệu. Bạn có thể thay đổi nó động bằng JavaScript qua element.style.position.

Ví dụ minh họa

Mã sau chuyển hộp từ relative sang absolute khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 350px;
      height: 200px;
      background-color: orange;
      border: 3px solid red;
      position: relative; /* Vị trí ban đầu */
      top: 20px;
    }
  </style>
</head>
<body>
  <p>Nhấn nút để chuyển position sang absolute</p>
  <button type="button" onclick="changePosition()">Đặt Position</button>
  <div id="box">
    <p>Đây là div. Đâ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. Đây là div.</p>
    <p>Đây là div. Đây là div. Đây là div. Đây là div. Đây là div.</p>
  </div>
  <script>
    function changePosition() {
      document.getElementById("box").style.position = "absolute";
      /* Khi chuyển sang absolute, phần tử rời khỏi luồng bình thường.
         Vị trí top:20px giờ tính từ ancestor có position gần nhất. */
    }
  </script>
</body>
</html>

Các giá trị của position

Mẹo: Khi đặt position: absolute hoặc fixed, phần tử không còn chiếm diện tích trong luồng, các phần tử khác sẽ lấp đầy chỗ trống.