Thuộc tính vị trí của phong cách

Định nghĩa và cách sử dụng

định vị Cài đặt thuộc tính hoặc trả về loại phương pháp định vị của phần tử (định dạng, tương đối, tuyệt đối hoặc cố định).

Xin xem thêm:

Hướng dẫn CSS:Định vị CSS

Hướng dẫn tham khảo CSS:Thuộc tính position

Mô hình

Ví dụ 1

Chuyển đổi vị trí của phần tử <div> từ định vị tương đối sang định vị tuyệt đối:

document.getElementById("myDIV").style.position = "absolute";

Thử ngay

Ví dụ 2

Sử dụng các loại định vị khác nhau:

function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var posVal = x.options[whichSelected].text;
  var elem = document.getElementById("myDiv");
  elem.style.position = posVal;
}

Thử ngay

Ví dụ 3

Trả về vị trí của phần tử <h2>:

alert(document.getElementById("myH2").style.position);

Thử ngay

Cú pháp

Trả về thuộc tính position:

object.style.position

Đặt thuộc tính position:

object.style.position = "static|absolute|fixed|relative|sticky|initial|inherit"

Giá trị thuộc tính

Giá trị Mô tả
static Phần tử được hiển thị theo thứ tự xuất hiện trong luồng tài liệu. Mặc định.
absolute Phần tử được định vị so với phần tử cha đầu tiên được định vị (không phải static).
fixed Phần tử được định vị so với cửa sổ trình duyệt.
relative

Phần tử được định vị so với vị trí bình thường của nó.

Do đó "left:20" sẽ tăng vị trí bên trái của phần tử 20 pixel.
sticky

Phần tử được định vị dựa trên vị trí cuộn của người dùng.

Các phần tử dính chuyển đổi giữa relative và fixed dựa trên vị trí cuộn.

Nó là định vị tương đối, cho đến khi gặp vị trí dịch chuyển được chỉ định trong khung nhìn - sau đó nó 'dính' vào vị trí thích hợp (như position:fixed).

Chú ý：Không hỗ trợ IE/Edge 15 hoặc các phiên bản trước. Safari bắt đầu hỗ trợ tiền tố Webkit từ phiên bản 6.1.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial。
inherit Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit。

Chi tiết kỹ thuật

Giá trị mặc định： static
Giá trị trả về： chuỗi, biểu thị loại vị trí của phần tử.
CSS phiên bản： CSS2

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ