Thuộc tính position của CSS

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

Thuộc tính position quy định loại định vị của phần tử.

Giải thích

Thuộc tính này xác định cơ chế định vị được sử dụng để tạo ra bố cục của phần tử. Bất kỳ phần tử nào cũng có thể được định vị, nhưng các phần tử tuyệt đối hoặc cố định sẽ tạo ra một khung block, bất kể loại phần tử đó là gì. Các phần tử định vị tương đối sẽ dịch chuyển so với vị trí mặc định của chúng trong luồng bình thường.

Xem thêm:

Giáo trình CSS:Định vị CSS

Hướng dẫn HTML DOM:Thuộc tính position

Ví dụ

Định vị phần tử h2:

h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

Thử ngay

Cú pháp CSS

position: static|absolute|fixed|relative|sticky|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
absolute

Tạo phần tử định vị tuyệt đối, định vị so với phần tử cha đầu tiên ngoài định vị static.

Vị trí của phần tử được quy định bởi các thuộc tính "left", "top", "right" và "bottom".
fixed

Tạo phần tử định vị tuyệt đối, định vị so với cửa sổ trình duyệt.

Vị trí của phần tử được quy định bởi các thuộc tính "left", "top", "right" và "bottom".
relative

Tạo phần tử định vị tương đối, định vị so với vị trí mặc định của nó trong luồng bình thường.

Do đó, "left:20" sẽ thêm 20 pixel vào vị trí LEFT của phần tử.
static Giá trị mặc định. Không có định vị, phần tử xuất hiện trong luồng bình thường (bỏ qua top, bottom, left, right hoặc z-index)
inherit Định nghĩa rằng giá trị của thuộc tính position nên kế thừa từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: static
Kế thừa: no
Phiên bản: CSS2
Cú pháp JavaScript: object.style.position="absolute"

TIY ví dụ

Định vị: Định vị tương đối
Ví dụ này演示 cách định vị phần tử so với vị trí mặc định của phần tử.
Định vị: Định vị tuyệt đối
Ví dụ này演示 cách sử dụng giá trị tuyệt đối để định vị phần tử.
Định vị: Định vị cố định
Ví dụ này演示 cách định vị phần tử so với cửa sổ trình duyệt.
Thiết lập hình dạng của phần tử
Ví dụ này演示 cách thiết lập hình dạng của phần tử. Phần tử này được cắt theo hình dạng này và hiển thị ra.
Z-index
Z-index có thể được sử dụng để đặt một phần tử sau một phần tử khác.
Z-index
Các phần tử trong ví dụ trên đã thay đổi Z-index.

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
1.0 7.0 1.0 1.0 4.0