Thuộc tính bottom trong CSS
Bùi Tấn Lực - 1042
- 02/10/2025
Chức năng của Thuộc tính bottom trong CSS
Thuộc tính bottom trong CSS dùng để canh cạnh dưới của một phần tử HTML so với cạnh dưới của phần tử cha hoặc cạnh dưới của trình duyệt (áp dụng trong position: fixed, absolute), dùng để canh cạnh dưới của một phần tử HTML so với vị trí ban đầu của nó (áp dụng trong position: relative).
Cú pháp của Thuộc tính bottom trong CSS
bottom: giatri;
giatri: Giá trị có thể là 10px, 50%,....
Ví dụ: bottom:10px; hoặc bottom:50%;
Code Thuộc tính bottom trong CSS
Thuộc tính bottom khi dùng position fixed trong CSS
Thuộc tính bottom trong position fixed sẽ canh cạnh dưới của phần tử HTML so với cạnh dưới của trình duyệt:
bottom:10px; position:fixed;
bottom:50%; position:fixed;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính bottom khi dùng position fixed trong CSS</title>
<style>
#divthuong{width:100%; height:1300px; background:red;}
span{width:100px; height:30px; background:green; right:10px; z-index:1; line-height:30px; text-align:center; color:#fff}
</style>
</head>
<body>
<h1>Thuộc tính bottom khi dùng position fixed trong CSS</h1>
<p>Thuộc tính bottom trong position fixed sẽ canh cạnh dưới của phần tử HTML so với cạnh dưới của trình duyệt:</p>
<div id="divthuong"></div>
<span style="bottom:10px; position:fixed;">bottom:10px;</span>
<span style="bottom:50%; position:fixed;">bottom:50%;</span>
</body>
</html>
Thuộc tính bottom khi dùng position absolute trong CSS
Thuộc tính bottom trong position absolute sẽ canh cạnh dưới của phần tử HTML so với cạnh dưới của phần tử cha có position relative gần nhất:
bottom:10px; position:absolute;
bottom:50%; position:absolute;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính bottom khi dùng position absolute trong CSS</title>
<style>
#d-relative{width:100%; height:300px; background:red;}
span{width:100px; height:30px; background:green; right:10px; z-index:1; line-height:30px; text-align:center; color:#fff}
</style>
</head>
<body>
<h1>Thuộc tính bottom khi dùng position absolute trong CSS</h1>
<p>Thuộc tính bottom trong position absolute sẽ canh cạnh dưới của phần tử HTML so với cạnh dưới của phần tử cha có position relative gần nhất:</p>
<div id="d-relative" style="position:relative">
<span style="bottom:10px; position:absolute;">bottom:10px;</span>
<span style="bottom:50%; position:absolute;">bottom:50%;</span>
</div>
</body>
</html>
Thuộc tính bottom khi dùng position relative trong CSS
Thuộc tính bottom trong position relative sẽ canh cạnh dưới của phần tử HTML so với vị trí ban đầu của nó:
bottom: 0px; position:relative;
bottom: -10px; position:relative;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính bottom khi dùng position relative trong CSS</title>
<style>
#divtong{width:100%; height:300px; background:red;}
#divtong p{margin:0px; padding:0px; width:100px; height:30px; background:green; left:10px; z-index:1; line-height:30px; text-align:center; color:#fff}
</style>
</head>
<body>
<h1>Thuộc tính bottom khi dùng position relative trong CSS</h1>
<p>Thuộc tính bottom trong position relative sẽ canh cạnh dưới của phần tử HTML so với vị trí ban đầu của nó:</p>
<div id="divtong">
<p style="bottom: 0px; position:relative;" >bottom: 0px;</p>
<p style="bottom: -10px; position:relative;" >bottom: -10px;</p>
</div>
</body>
</html>
Thuộc tính bottom kết hợp với các thuộc tính CSS khác
Giá trị của bottom phát huy hiệu quả rõ rệt khi được sử dụng cùng các thuộc tính định vị khác. Thay vì chỉ điều chỉnh khoảng cách từ phần tử đến cạnh dưới, bạn có thể kết hợp nhiều thuộc tính để kiểm soát chính xác vị trí và thứ tự hiển thị của phần tử.
Kết hợp bottom với top trong CSS
bottom và top đều xác định khoảng cách của phần tử so với các cạnh của phần tử tham chiếu khi phần tử sử dụng cơ chế định vị phù hợp. Việc khai báo đồng thời hai thuộc tính giúp tạo ra cách bố trí linh hoạt hơn, đặc biệt khi muốn phần tử có kích thước hoặc vị trí được kiểm soát theo cả hai chiều.
Trong một số trường hợp, khi phần tử không có kích thước cố định và cả top lẫn bottom đều được thiết lập, trình duyệt có thể sử dụng hai giá trị này để xác định chiều cao của phần tử. Vì vậy, không nên xem top và bottom đơn giản là hai thuộc tính thay thế cho nhau.
Khi cần đặt một phần tử nằm giữa hoặc chiếm một vùng xác định trong phần tử cha, việc kết hợp top và bottom có thể giảm nhu cầu tính toán kích thước thủ công.
Kết hợp bottom với left và right trong CSS
Kết hợp bottom với left và right rất hữu ích khi cần đặt một phần tử vào một vùng cụ thể ở phía dưới. Cách này thường phù hợp với các thành phần như thanh thông báo, hộp điều khiển, lớp phủ hoặc nội dung cần bám theo một khu vực nhất định.
Khi left và right cùng được thiết lập, phần tử có thể được giới hạn theo cả hai cạnh ngang. Nếu đồng thời có top hoặc bottom, bạn có thể xác định cả vùng mà phần tử được phép chiếm trong phần tử tham chiếu.
Điểm cần lưu ý là các giá trị này chỉ có ý nghĩa đúng khi phần tử đang sử dụng cơ chế position phù hợp. Nếu chỉ thêm bottom, left hoặc right vào một phần tử có vị trí thông thường, kết quả có thể không giống mong muốn.
Kết hợp bottom với z-index trong CSS
bottom quyết định vị trí theo chiều dọc, còn z-index kiểm soát thứ tự xếp chồng của các phần tử. Hai thuộc tính này thường được dùng cùng nhau khi một phần tử được đặt ở phía dưới nhưng vẫn cần hiển thị nổi lên trên nội dung khác.
Ví dụ, một hộp thông báo có thể được đặt gần cạnh dưới bằng bottom, sau đó dùng z-index để tránh bị các phần tử khác che khuất. Cách kết hợp này đặc biệt hữu ích với những thành phần giao diện có tính nổi hoặc lớp phủ.
Tuy nhiên, z-index không phải lúc nào cũng chỉ cần đặt một giá trị thật lớn là giải quyết được vấn đề. Thứ tự xếp chồng còn phụ thuộc vào cấu trúc phần tử và các ngữ cảnh xếp chồng trong CSS. Vì vậy, nếu phần tử vẫn bị che dù đã tăng z-index, nên kiểm tra phần tử cha và cách các phần tử liên quan được định vị.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính bottom trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
