Thuộc tính top CSS

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

Thuộc tính top quy định viền trên của phần tử. Thuộc tính này xác định khoảng cách từ cạnh trên của phần tử định vị với cạnh trên của khối bao gồm.

Chú ý:Nếu giá trị của thuộc tính position là "static", việc đặt thuộc tính top sẽ không có bất kỳ hiệu ứng nào.

Giải thích

Đối với phần tử static, sẽ là auto; đối với giá trị chiều dài, sẽ là chiều dài tuyệt đối tương ứng; đối với giá trị phần trăm, sẽ là giá trị được chỉ định; nếu không, sẽ là auto.

Đối với phần tử được định nghĩa theo tương đối, nếu cả top và bottom đều là auto, giá trị tính toán sẽ là 0; nếu một trong hai là auto, thì lấy giá trị ngược lại của giá trị còn lại; nếu cả hai đều không phải là auto, bottom sẽ lấy giá trị ngược lại của top.

Xem thêm:

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

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

Ví dụ

Đặt viền trên của hình ảnh thấp hơn viền trên của phần tử bao gồm 5 pixel:

img
  {
  position:absolute;
  top:5px;
  }

Thử ngay

Ngữ pháp CSS

top: auto|length|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
auto Giá trị mặc định. Thông qua trình duyệt tính toán vị trí viền trên.
% Đặt vị trí trên bằng phần trăm của phần tử bao gồm. Có thể sử dụng giá trị âm.
length Đặt vị trí trên của phần tử bằng các đơn vị như px, cm, v.v. Có thể sử dụng giá trị âm.
inherit Định nghĩa rằng giá trị của thuộc tính top nên được kế thừa từ phần tử cha.

Chi tiết kỹ thuật

Giá trị mặc định: auto
Kế thừa: no
Phiên bản: CSS2
Ngữ pháp JavaScript: object.style.top="50px"

Các ví dụ khác

Sử dụng giá trị cố định để đặt viền trên của hình ảnh
Ví dụ này minh họa cách sử dụng giá trị cố định để đặt viền trên của hình ảnh.
Sử dụng phần trăm để đặt viền trên của hình ảnh
Ví dụ này minh họa cách sử dụng phần trăm để đặt viền trên của hình ảnh.

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ợ hoàn toàn thuộc tính này.

Chrome IE / Edge Firefox Safari Opera
1.0 5.0 1.0 1.0 6.0