Thuộc tính bottom CSS

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

Thuộc tính bottom quy định cạnh dưới của phần tử. Thuộc tính này xác định độ lệch từ cạnh dưới của cạnh ngoại vi của phần tử định vị đến cạnh dưới của khối bao gồm.

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

Giải thích

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

Đối với phần tử được định nghĩa tương đối, nếu cả bottom và top đều là auto, giá trị tính toán của cả hai đều là 0; nếu một trong hai là auto,则取另一个值的相反数；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

Tài liệu tham khảo HTML DOM:Thuộc tính bottom

Ví dụ

Đặt cạnh dưới của hình ảnh cao 5 pixel so với cạnh dưới của phần tử bao gồm:

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

Thử ngay

Cú pháp CSS

bottom: auto|length|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
auto Giá trị mặc định. Trình duyệt tính toán vị trí dưới của phần tử.
% Thiết lập vị trí cạnh dưới của phần tử bằng phần trăm so với kích thước của phần tử bao gồm. Có thể sử dụng giá trị âm.
length Thiết lập vị trí cạnh dưới 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 thuộc tính bottom nên kế thừa giá trị 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
Cú pháp JavaScript: object.style.bottom="50px"

Các ví dụ khác

Thiết lập cạnh dưới của hình ảnh bằng giá trị pixel
Ví dụ này minh họa cách sử dụng giá trị pixel để thiết lập cạnh dưới của hình ảnh.
Thiết lập cạnh dưới của hình ảnh bằng phần trăm
Ví dụ này minh họa cách sử dụng phần trăm để thiết lập cạnh dưới 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ợ đầy đủ thuộc tính này.

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