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

Thuộc tính top xác định khoảng cách từ cạnh trên của phần tử đến cạnh trên của khối chứa định vị (containing block). Phần tử phải có position != static (absolute, relative, fixed, sticky) thì top mới có tác dụng.

Ví dụ minh họa

Mã sau đặt top: 100px cho div khi nhấn nút:

<!DOCTYPE html>
<html>
<head>
  <style>
    #myID {
      position: absolute; /* Bắt buộc */
      background: #ffe0b2;
      padding: 10px;
      border: 1px solid #ff9800;
    }
  </style>
</head>
<body>
  <button onclick="setTopPosition()">Đặt Top Position</button>
  <div id="myID">
    Đây là văn bản demo! Đây là văn bản demo!
  </div>
  <script>
    function setTopPosition() {
      document.getElementById("myID").style.top = "100px";
      /* Với position: absolute, top tính từ ancestor có position gần nhất.
         Nếu không có ancestor nào, tính từ  (initial containing block). */
    }
  </script>
</body>
</html>

Hành vi theo từng position

Lưu ý: Nếu cả top và bottom đều được đặt, top ưu tiên (trong LTR). Giá trị auto (mặc định) nghĩa là không dịch chuyển.