CSS bottom property – Sử dụng bottom property trong CSS

CSS bottom property là một trong những thuộc tính offset được sử dụng để chỉ định vị trí dưới cùng cho các phần tử được định vị theo chiều dọc. Thuộc tính này không ảnh hưởng đến các phần tử không được định vị. Đây là một trong bốn thuộc tính offset bao gồm left, right và top. Hiệu quả của thuộc tính này phụ thuộc vào vị trí tương ứng của phần tử, tức là giá trị của thuộc tính position. Thuộc tính bottom không ảnh hưởng khi thuộc tính position được thiết lập thành giá trị static.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS bottom property là gì ?

Thuộc tính bottom được sử dụng để chỉ định vị trí dưới cùng của phần tử đối với các phần tử đã được định vị theo chiều dọc. Nó là một trong bốn thuộc tính offset, bao gồm left, right và top. Nhưng nó không ảnh hưởng đến các phần tử không được định vị. Thuộc tính bottom phụ thuộc vào giá trị của thuộc tính position và không có tác dụng khi position được thiết lập thành giá trị static.

Thuộc tính bottom trong CSS được sử dụng bởi các lập trình viên web khi muốn thay đổi vị trí của một phần tử theo chiều dọc. Nó có thể được sử dụng để tạo ra các hiệu ứng, ví dụ như di chuyển phần tử từ trên xuống dưới hoặc chỉnh sửa vị trí của một phần tử trong bố cục trang web.

Thuộc tính bottom trong CSS được sử dụng để chỉ định vị trí dưới cùng của một phần tử theo chiều dọc. Nó có thể được áp dụng cho các phần tử đã được định vị theo chiều dọc và không ảnh hưởng đến các phần tử không được định vị. Hiệu quả của thuộc tính này phụ thuộc vào giá trị của thuộc tính position, tức là nó không có tác dụng khi position được thiết lập thành giá trị static.

Hướng dẫn CSS bottom property

Cú pháp của CSS bottom property:

selector {
  bottom: value;
}

Các giá trị của thuộc tính này được định nghĩa như sau:

• auto: Đây là giá trị mặc định. Nó cho phép trình duyệt tính toán vị trí cạnh dưới.
• length: Giá trị này xác định vị trí của thuộc tính bottom trong px, cm, pt, vv. Nó cho phép các giá trị âm.
• percentage: Giá trị này xác định vị trí của thuộc tính bottom theo phần trăm (%). Nó được tính đến chiều cao của khối chứa phần tử. Nó cũng cho phép các giá trị âm.
• initial: Thuộc tính được thiết lập thành giá trị mặc định của nó.
• inherit: Kế thừa giá trị từ phần tử cha của nó.

Ví dụ CSS bottom property

CSS bottom property cho phép bạn chỉ định vị trí dọc của một phần tử được định vị. Nó có thể được sử dụng để di chuyển một phần tử lên trên, xuống dưới, hoặc bất cứ nơi nào bạn muốn trong luồng tài liệu.

Giá trị mặc định của thuộc tính này là auto, có nghĩa là phần tử sẽ được hiển thị ở vị trí mặc định của nó.

Để di chuyển một phần tử xuống dưới, bạn có thể sử dụng giá trị dương cho thuộc tính bottom. Ví dụ:

div {
  position: absolute;
  bottom: 100px;
}

Ví dụ này sẽ di chuyển phần tử div xuống dưới 100px so với vị trí hiện tại của nó.

Để di chuyển một phần tử lên trên, bạn có thể sử dụng giá trị âm cho thuộc tính bottom. Ví dụ:

div {
  position: absolute;
  bottom: -100px;
}

Ví dụ này sẽ di chuyển phần tử div lên trên 100px so với vị trí hiện tại của nó.

Dưới đây là một số ví dụ khác về cách sử dụng CSS bottom property:

// Di chuyển một phần tử xuống dưới 50px
div {
  position: absolute;
  bottom: 50px;
}

// Di chuyển một phần tử lên trên 100px và sang phải 20px
div {
  position: absolute;
  bottom: -100px;
  right: 20px;
}

// Di chuyển một phần tử xuống dưới 50px và đặt nó theo trung tâm của cửa sổ
div {
  position: absolute;
  bottom: 50px;
  top: 50%;
  transform: translateY(-50%);
}

Bạn có thể sử dụng CSS bottom property để tạo ra các hiệu ứng bố cục thú vị và sáng tạo.

Trong trường hợp phần tử được định vị là position: relative, thì giá trị của thuộc tính bottom sẽ là khoảng cách giữa phần tử được định vị và vị trí hiện tại của nó. Trong trường hợp phần tử được định vị là position: absolute, thì giá trị của thuộc tính bottom sẽ là khoảng cách giữa phần tử được định vị và vị trí của phần tử cha của nó.

Ưu và Nhược điểm CSS bottom property

Ưu điểm

• Thuộc tính bottom có thể được sử dụng để di chuyển phần tử theo chiều dọc trong trang web.
• Nó có thể được sử dụng để tạo ra các hiệu ứng, ví dụ như di chuyển phần tử từ trên xuống dưới hoặc chỉnh sửa vị trí của một phần tử trong bố cục trang web.

Nhược điểm

• Thuộc tính bottom không ảnh hưởng đến các phần tử không được định vị.
• Hiệu quả của thuộc tính này phụ thuộc vào giá trị của thuộc tính position và không có tác dụng khi position được thiết lập thành giá trị static.

Lời khuyên CSS bottom property

Khi sử dụng thuộc tính bottom trong CSS, bạn nên cân nhắc kỹ về giá trị của thuộc tính position để đảm bảo rằng hiệu quả của thuộc tính bottom phù hợp với mong đợi. Bạn nên sử dụng thuộc tính này để tạo ra các hiệu ứng và chỉnh sửa vị trí của các phần tử trong bố cục trang web của bạn.