Thuộc tính bottom trong CSS
Bùi Tấn Lực - 367
- 02/10/2025
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, chi tiết như nào hãy cùng chúng tôi phân tích:
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>
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 *
